ToolTip that is called from Grid item

[Dionisio Luis]

Good Evening,

I want to call the TOOLTIP from an  Grid Item.

On that Grid Item I will give an  id (that is generated automaticly ) and I will click on the item, set the Target .

the tool tip will open, but its not settings in position on the Target.

---GRID

<GridColumn HeaderText="ID" Field=@nameof(ModelOrderSalesHeader.ORDER_NUMBER) TextAlign="TextAlign.Left" AllowFiltering="true" AutoFit="true">

                                                    <Template>

                                                        @{

                                                            var cx = (context as ModelOrderSalesHeader);

                                                            <a class="link_class" @onclick="(() => OpenCustomerCardDetail(cx) )"><i class="fa fa-external-link mr-2" style="font-size:12px"></i>@((cx.ORDER_NUMBER==null)?"N/A":@cx.ORDER_NUMBER)</a>

                                                            <a [email protected] class="link_class tooltip_class" @onclick="(() => OpenToolTip(cx.FieldID))">teste</a>

                                                        }

                                                    </Template>

                                                </GridColumn>

--CODE

  //tooltipOrder.Target = "#" + TargetID;

        await tooltipOrder.Open();

--TOOLTIP

<SfTooltip ID="toolTip" @ref="tooltipOrder" Width="500" HtmlAttributes="HtmlAttribute" Position="@Position" ShowTipPointer="false" MouseTrail="true" IsSticky="true" OpensOn="Click"  >

    <TooltipTemplates>

        <Content>

            <span>test data</span>

        </Content>

    </TooltipTemplates>

</SfTooltip>

[Vignesh Natarajan]

Hi Dionisio,  

 

Greetings from Syncfusion support.  

 

Query: “On that Grid Item I will give an  id (that is generated automaticly ) and I will click on the item, set the Target . && the tool tip will open, but its not settings in position on the Target.” 

 

From your query we suspect that you want to display the tooltip on click for the value inside the Grid Column. We suggest you to render the tooltip component inside the Grid Column using ColumTemplate feature of Grid. Refer the below code example.  

 

<SfGrid DataSource="@Employees"> 

    <GridColumns> 

        <GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    var cx = (context as EmployeeData); 

                    <a class="link_class" @onclick="(() => OpenCustomerCardDetail(cx) )"><i class="fa fa-external-link mr-2" style="font-size:12px"></i>@((cx.EmployeeID == null)?"N/A":cx.EmployeeID.ToString())</a> 

                    <SfTooltip ID="toolTip" Width="500" Position="@Position.BottomCenter" ShowTipPointer="false" MouseTrail="true" IsSticky="true" OpensOn="Click"> 

                        <TooltipTemplates> 

                            <Content> 

                                @cx.FirstName 

                            </Content> 

                        </TooltipTemplates> 

                        <a id=@cx.FirstName class="link_class tooltip_class">@cx.FirstName</a> 

                    </SfTooltip> 

                     

                } 

            </Template> 

        </GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Right" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

Refer the below screenshot as output for the above code 

 

 

 

Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/155907/ze/BlazorApp1-953810738  

 

Kindly get back to us if you have further queries or above solution does not match your query.  

  

Regards,
Vignesh Natarajan 

[Dionisio Luis]

I do understand what you are doing, that is the SIMPLE way to do it.

but you are for each row inserting all that code.

So if you have 10000 rows, every row will have the tooltip code...

So I didnt want to do that because of repeating the same thing...

So it is possible to do it any other way ?

Or i need to repeat always the tooltip code inside every single row...

[Dionisio Luis]

And the information for each row  call a new API data...

[Dhivya Rajendran]

Hi Dionisio, 

Sorry for the delay in getting back to you.  

We have validated at our end and we did not able to change target dynamically for Tooltip. However, you can achieve your requirement by using the below way. In the below sample, we have render the grid inside the tooltip and apply Id (link_class)as same for all the anchor element(each row) and specify that anchor element Id as target for the tooltip so whenever we click on the anchor element it automatically so the tooltip to the corresponding target element(no need to open tooltip externally). 

Please refer the below code example for more information. 

 

    <SfTooltip @ref="ToolTipObj" Target="#link_class" ID="toolTip" Width="500" Position="@Position.BottomCenter" ShowTipPointer="false" MouseTrail="true" IsSticky="true" OpensOn="Click"> 

        <TooltipTemplates> 

            <Content> 

                <span>test data</span> 

            </Content> 

        </TooltipTemplates> 

        <SfGrid DataSource="@Employees"> 

            <GridColumns> 

                <GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120"> 

                    <Template> 

                        @{ 

                            var cx = (context as EmployeeData); 

                            <a class="link_class" @onclick="(() => OpenCustomerCardDetail(cx) )"><i class="fa fa-external-link mr-2" style="font-size:12px"></i>@((cx.EmployeeID == null)?"N/A":cx.EmployeeID.ToString())</a> 

                            <a id="link_class" class="link_class tooltip_class">teste</a> 

                        } 

                    </Template> 

                </GridColumn> 

                <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

                . . . .  

            </GridColumns> 

        </SfGrid> 

    </SfTooltip> 

Note: We suggest you to upgrade to the latest version v18.2.0.45 

Please get back to us if your require further assistance on this. 

Regards, 

R.Dhivya