Completed
Last Updated: 12 Jun 2021 14:56 by ADMIN
Release 2.24.0
Andrew
Created on: 20 Oct 2020 08:48
Category: Tooltip
Type: Bug Report
13
Tooltips can remain shown after moving the mouse over it and moving away to show another tooltip

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;
    }
}

4 comments
ADMIN
Marin Bratanov
Posted on: 12 Jun 2021 14:56

Yes, Andrew, you should just upgrade to 2.24.0 or later.

Generally, bugs in our components rarely require that you do anything to get the fix (apart from upgrading). Usually, just removing any temporary workarounds.

--Marin

Andrew
Posted on: 08 Jun 2021 20:20
This request shows Completed in 2.24.0 but I don't see any information on how to apply the fix. Should this be automatic in the latest release?
Torsten
Posted on: 20 Nov 2020 07:54

I had the same problem. I fixed it by putting the tooltip component outside the grid. 

The only problem there was, that the tooltip had to re-evaluate the targets. I found a solution for this problem in the following thread: https://feedback.telerik.com/blazor/1460642-the-tooltip-should-be-able-to-re-evaluate-targets-tooltip-not-working-for-elements-not-present-at-first-rendering

Doug
Posted on: 04 Nov 2020 23:04
I see this problem too but what's interesting is that if I run locally (F5 or Ctrl-F5 through Visual Studio) this issue doesn't occur. However when deployed to IIS on prem the issue is rampant.