When you move the mouse over the grid cells in this example, several tooltips can remain shown, especially if you move the mouse down so it goes through a tooltip when going towards the next row, and you move it quickly.
<div class="row">
<TelerikGrid Data="@Items">
<RowTemplate Context="sampleData">
@{
string detailLink = $"info/{sampleData.Id}";
string className = $"screenshot-hover-{sampleData.Id}";
string selector = $".{className}";
<td title="@sampleData.Name" data-id="@sampleData.Id" class="@className">
<NavLink href="@detailLink">@sampleData.Name</NavLink>
</td>
<td title="@sampleData.Name" data-id="@sampleData.Id" class="@className">
<NavLink href="@detailLink">@sampleData.Name</NavLink>
</td>
<td title="@sampleData.Name" data-id="@sampleData.Id" class="@className">
<NavLink href="@detailLink">@sampleData.Name</NavLink>
</td>
<TelerikTooltip TargetSelector="@selector" ShowOn="@TooltipShowEvent.Hover" Position="@TooltipPosition.Bottom">
<Template Context="ttipContext">
@{
var dataAttributes = ttipContext.DataAttributes;
var title = ttipContext.Title;
if (title != null && dataAttributes.ContainsKey("id"))
{
<img src="images/@(dataAttributes["id"])" alt="@title" />
<p>@title</p>
}
}
</Template>
</TelerikTooltip>
}
</RowTemplate>
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Name))" />
<GridColumn Field="@(nameof(SampleData.Address))" />
<GridColumn Field="@(nameof(SampleData.PhoneNumber))" />
</GridColumns>
</TelerikGrid>
</div>
@code {
class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string PhoneNumber { get; set; }
}
SampleData[] Items { get; set; }
protected async override Task OnInitializedAsync()
{
const int sampleSize = 25;
Items = new SampleData[sampleSize];
for (int i = 0; i < sampleSize; i++)
{
Items[i] = new SampleData
{
Id = i,
Name = $"{i}.SomeName",
Address = $"{i}{i}{i}{i} Cherry Lane",
PhoneNumber = $"1-512-{i % 100:00}4-6000",
};
}
await Task.CompletedTask;
}
}