Datagrid column tooltip not working properly

[David Dumitru]

Hi,

I'm struggling with the following problem:

I want to attach a tooltip to a column and then having the content of the tooltip associated with a class parameter, like so: 

<SfTab>

<TabItems>

<TabItem>

<ChildContent>

<TabHeader Text="Campaign Exceptions"></TabHeader>

</ChildContent>

<ContentTemplate>

<SfGrid Width="50%" DataSource="@campaignExceptions" AllowSorting="true" EnableAltRow="true" @ref="@CampaignExceptionsGrid" AllowResizing="true">

<GridEditSettings AllowEditing="true" Mode="Syncfusion.Blazor.Grids.EditMode.Batch"></GridEditSettings>

<GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Both" CheckboxMode="CheckboxSelectionType.Default"></GridSelectionSettings>

<GridEvents CellSelected="CellSelectHandler" CellSaved="CellSavedHandler" TValue="CampaignException"></GridEvents>

<GridColumns>

<GridColumn Field=@nameof(CampaignException.ExceptionId) HeaderText="#" IsPrimaryKey="true" AllowEditing="false" TextAlign="TextAlign.Center" Width="100"></GridColumn>

<GridColumn Field=@nameof(CampaignException.Active) HeaderText="Is Active" DisplayAsCheckBox="true" EditType="EditType.BooleanEdit" AllowEditing="true" TextAlign="TextAlign.Center" Width="100"></GridColumn>

<GridColumn Field=@nameof(CampaignException.Name) HeaderText="Name" TextAlign="TextAlign.Left" Width="100" AllowEditing="false">

<Template>

@{

CampaignException exception = (context as CampaignException);

<div>

<SfTooltip ID="exceptionDescriptionTooltip" Target="#exceptionName" Position="Position.BottomCenter" Content="@exception.Description">

<div id="exceptionName">

@exception.Name

</div>

</SfTooltip>

</div>

}

</Template>

</GridColumn>

</GridColumns>

</SfGrid>

</ContentTemplate>

</TabItem>

</TabItems>

</SfTab>

And this is the result when hovering over the "Name" column:

And without the SfTooltip:

Can you please tell me what exactly am I doing wrong? And is it possible to achieve this while hovering over all the columns?

Thank you,

David.

[David Dumitru]

I want to add something:

I had a look at this post as well, the guy seems to be doing the same thing:

https://www.syncfusion.com/forums/151359/tooltip-for-button-in-grid-command-column 

[Renjith Singh Rajendran]

Hi David, 

Thanks for contacting Syncfusion support. 

We suggest you to remove the ID property of SfTooltip to overcome the problem you are facing. Please use the code below, 

 

            <Template> 

                @{ 

                    EmployeeData exception = (context as EmployeeData); 

                    <div> 

                        <SfTooltip ID="exceptionDescriptionTooltip" Target="#exceptionName" Position="Position.BottomCenter" Content="@exception.FirstName"> 

                           <div id="exceptionName"> 

                                @exception.FirstName 

                            </div> 

                        </SfTooltip> 

                    </div> 

                } 

            </Template> 

We are also attaching the sample for your convenience. Please download the sample from the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1560913440 

 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[David Dumitru]

This worked, thank you very much! It was blatantly obvious if I look at it now....

Have a great day!

David.

[Renjith Singh Rajendran]

Hi David, 

Thanks for your update. 

We are glad to hear that our suggestion helped you in achieving your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran