How to add tooltip in foreach

[Dimitar]

Hello,

I just can't understand how to add tooltip in foreach(......)

{

<span title="@moFund.Notes">@moFund.Amount</span>

}

Can you please help me?

[YuvanShankar Arunagiri]

Hi Dimitar,

We have reviewed your reported query regarding the Tooltip component used with multiple elements generated through a loop. Based on the code snippet you shared, the tooltip content can be displayed correctly by using the title attribute value of the respective target element.

Please refer to the User Guide (UG) link, code snippet, and sample link below for more details on how to implement this approach effectively.

UG link: https://blazor.syncfusion.com/documentation/tooltip/content#using-the-title-attribute

<SfTooltip Target="#container [title]">

    <div id="container" style="display: grid;">

        @foreach (var text in ListString)

        {

            <span style="padding: 10px;" title="@text">@text</span>

        }

    </div>

</SfTooltip>

 

@code {

    public List<string> ListString = new List<string> { "AAAA", "BBBB", "CCCC", "DDD", "EEE" };

}

Sample link: https://blazorplayground.syncfusion.com/embed/BNVSiNMIJWxvVxEx?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Please let us know if you need any further assistance or clarification.

Regards,

YuvanShankar A

[Dimitar]

Actually it is little different on my side

<GridColumns>

    <GridColumn Field=@nameof(MonthlyObligationLocalViewModel.Month) HeaderText="Month" Width="120" Format="MMM"></GridColumn>

    @if (ViewModel.Funds != null && ViewModel.Funds.Any())

    {

        foreach (var fund in ViewModel.Funds)

        {

            <GridColumn Field="@fund.Amount.ToString()" HeaderText="@fund.ShortName">

                <Template Context="row">

                    @{

                        var mo = (row as MonthlyObligationLocalViewModel);

                        if (mo != null && mo.Funds != null)

                        {

                            var moFund = mo.Funds.FirstOrDefault(x => x.Id == fund.Id);

                            if (moFund != null)

                            {

                                <span title="@moFund.Notes">@moFund.Amount</span>

                            }

                            else

                            {

                                <span>0.0</span>

                            }

                        }

                    }

                </Template>

            </GridColumn>

        }

    }

    else

    {

        <GridColumn Field=@nameof(MonthlyObligationLocalViewModel.Amount) HeaderText="Amount" Width="120" Format="C2"></GridColumn>

    }

</GridColumns>

[Guhanathan Ramanathan]

Hi Dimitar ,

 

Based on your requirement, we created a simple sample that renders a Syncfusion SfGrid, dynamically generates a column for each fund inside a foreach loop, and shows how to display the fund notes as tooltips on the amount values using the title attribute. Please refer to the code snippet and the attached sample for your reference.

 

<SfGrid DataSource="@ViewModel.Obligations" AllowPaging="true">

    <GridColumns>

        <GridColumn Field=@nameof(MonthlyObligationLocalViewModel.Month)

                    HeaderText="Month"

                    Width="120"

                    Format="MMM">

        </GridColumn>

 

        @if (ViewModel.Funds?.Any() == true)

        {

            foreach (var fund in ViewModel.Funds)

            {

                <GridColumn Field=@($"Fund_{fund.Id}")

                            HeaderText="@fund.ShortName"

                            TextAlign="TextAlign.Right"

                            Width="150">

                    <Template Context="row">

                        @{

                            if (row is MonthlyObligationLocalViewModel mo &&

                            mo.Funds?.FirstOrDefault(x => x.Id == fund.Id) is { } moFund)

                            {

                                var tooltip = string.IsNullOrWhiteSpace(moFund.Notes)

                                ? "No notes available"

                                : moFund.Notes;

 

                                <span title="@tooltip"

                                      style="pointer-events:auto; cursor: help;">

                                    @moFund.Amount.ToString("N2")

                                </span>

                            }

                            else

                            {

                                <span title="No notes available"

                                      style="pointer-events:auto; cursor: help;">

                                    0.00

                                </span>

                            }

                        }

                    </Template>

                </GridColumn>

            }

        }

        else

        {

            <GridColumn Field=@nameof(MonthlyObligationLocalViewModel.Amount)

                        HeaderText="Amount"

                        Width="120"

                        Format="C2">

            </GridColumn>

        }

    </GridColumns>

</SfGrid>

 

 

Sample:https://blazorplayground.syncfusion.com/embed/BthoWjMdqKouyKOd?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

 

We have also provided built-in support for showing tooltips on both header and content cells through the ShowTooltip property. When enabled, tooltips appear on hover, providing additional context and enhancing the overall user experience. Please refer the documentation for your reference.

Demo:Blazor DataGrid Tooltip | Custom Tooltip | Syncfusion

 

Please get back to us if you have further queries.

Regards,

Guhanathan   

[Dimitar]

Thank you. TooltipTemplate is very good but do not work with custom column. So I cannot add  SfTooltip  in my custom column?

[Guhanathan Ramanathan]

Hi Dimitar,

 

Based on your query, For normal columns, you can continue using the built-in feature for a more streamlined experience. When using a template, ensure that the Field property is definedwhich exactly match those in the data source. Please refer the attached sample for your reference. 

Sample: https://blazorplayground.syncfusion.com/embed/VtBIMXsGfTSobRBm?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Please get back to us if you have further queries.

Regards,

Guhanathan R

[Dimitar]

Hello,

I understand how TooltipTemplate works. but he do not work with

<GridColumn Field=@($"Fund_{fund.Id}") HeaderText="@fund.ShortName">

    <Template Context="row">

When I hover with my mouse over this column the TooltipTemplate does not fire at all

[Guhanathan Ramanathan]

Hi Dimitar,

Greetings from Syncfusion,

 

We are unable to reproduce the reported issue when testing in latest version. For your reference, we have shared a simple sample. To proceed with investigating the reported problem, we would need some additional clarification from your end. Please share the below details to proceed further at our end.

 

· To analyze the reported issue, could you please share a simple and reproducible sample that demonstrates the problem? This will assist us in identifying the issue more efficiently and providing a resolution

· Kindly share your attempt to replicate the issue using the attached simple sample

·  Share a video demonstration of the issue with a detailed explanation. This will greatly assist us in understanding the problem

 

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible. Thanks for your understanding.

 

Regards,

Guhanathan   

Attachment: Tooltip_2df75bd6.zip