HTML tooltip is shown and hidden at same moment on RadzenLink hover in DataGrid grouping

Radzen.Blazor Components
1

hello everyone,
I use RadzenLink in DataGrid with grouping enabled and show html tooltip on hover on it, but I find that the tooltip is shown and hidden at same moment when I hover on it
how to fix this issue, or it will be fixed in latest updates ?

Thank you

here is a sample of code I used

 <RadzenDataGrid AllowGrouping="true" .. >
<Columns>
<RadzenDataGridColumn ...>
<Template>
RenderFragment html =@<div>Test Html</div>;

  <RadzenLink href="javascript:void(0)" Text="Test Title"
                                MouseEnter="@((args) =>  ShowTooltipWithHtml(html, args, new TooltipOptions(){ Position = TooltipPosition.Top, Style = "background-color: var(--rz-white)", Duration = null }))" />

</Template>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid >

@code{
 RadzenLink radzenLink;
        public void ShowTooltipWithHtml(RenderFragment html, ElementReference elementReference, TooltipOptions options = null) => tooltipService.Open(elementReference, ds => html, options);
}
2

Hey @rami_sosi,

Avoid posting duplicate threads or we will have no other option but discontinue your forum account.

3

Hi @enchev
sorry, but there is no duplication, I post two different threads of tooltip hover issue in DataGrid with grouping and tooltip clicked issue in DataGrid without grouping, and the two issues are different with variant codes
I found that this thread is hidden in My posts so I post it again,
then I find the first thread is hidden, please show it if could

https://forum.radzen.com/t/html-tooltip-always-shown-in-top-of-page-on-click-on-radzenlink-in-datagrid/14215

Thank you

4

As far as I can see the issue is exactly the same - tooltip for RadzenLink inside DataGrid.

5

@enchev yes but this thread is for DataGrid with grouping and on hover on RadzenLink event, and the other is for DataGrid regardless of grouping and on click on RadzenLink event

6

@enchev here is the other thread content that deleted

hello everyone,
I use RadzenLink in DataGrid and show html tooltip on click on it, but I find that the tooltip always appear on top page not on top of clicked link
how to fix this issue, or it will be fixed in latest updates ?

Thank you

here is a sample of code I used

<RadzenDataGridColumn ...>
<Template>
RenderFragment html =@<div>Test Html</div>;
<RadzenLink href="javascript:void(0)" @ref="radzenLink" Text="Test Title"
                                @onclick="@((args) => ShowTooltipWithHtml(html, radzenLink.Element, new TooltipOptions(){Position = TooltipPosition.Top, Style = "background-color: var(--rz-white);", Duration = null }))" />

</Template>
</RadzenDataGridColumn>

@code{
 RadzenLink radzenLink;
        public void ShowTooltipWithHtml(RenderFragment html, ElementReference elementReference, TooltipOptions options = null) => tooltipService.Open(elementReference, ds => html, options);
}
7

@enchev is there away to show the other hidden thread, or should I re post it again ?

8

the way you are capturing references to the element is causing the problem with wrong position since in this way the reference will be always to the link in the last row. You need separate component where you can capture properly reference:

image
image1920×1080 434 KB

image
image1920×1080 202 KB

I'm unable to reproduce this problem - the tooltip will stay open with the default duration

9

@enchev thank you, I will try this fix

10

@enchev you need to try it in DataGrid and set AllowGrouping="true", and then put the following code in column template

 <RadzenLink href="javascript:void(0)" Text="Test Title"
                                MouseEnter="@((args) =>  ShowTooltipWithHtml(html, args, new TooltipOptions(){ Position = TooltipPosition.Top, Style = "background-color: var(--rz-white)", Duration = null }))" />

@code{
 RadzenLink radzenLink;
        public void ShowTooltipWithHtml(RenderFragment html, ElementReference elementReference, TooltipOptions options = null) => tooltipService.Open(elementReference, ds => html, options);
}