The tooltip should be able to re-evaluate targets - Tooltip not working for elements not present at first rendering

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 28 May 2024 12:13 by Emmett

Release 2.27.0

René

Created on: 06 Apr 2020 08:58

Category: Tooltip

Type: Feature Request

The tooltip should be able to re-evaluate targets - Tooltip not working for elements not present at first rendering

Unfortunately the tooltip component does only work for elements that are present at first rendering.

If elements are surrounded by an if-condition which becomes true at a later point in time, the tooltip is not displayed.

Our usecase: We have tables where some data is computed after displaying the rest of the table. The computing and displaying works and the title is there (and shown in the default windows tooltip) but the Telerik tooltip is not displayed.

Duplicated Items

Extra Tooltip at Position 0,0 if Mouse Cursor is moved from one element with tooltip to another.

7 comments

Emmett

Posted on: 28 May 2024 12:13

This is an old post but wWe came across the same problem recently but the workaround only partially solves it.

If the tooltip is visible on the button that triggers the change, then the value never gets reset but instead reverts to the base title tooltip. Consider the following where the TelerikTooltip targets a .tooltip-target which is setup in the TelerikButton. When the button is pressed the tooltip should update but fails to.

Our example is based around an Undo/Redo action where the tooltip shows the action of the button which is dynamically set and updated based on what the available actions are. We gained a solution outside of relying on the tooltip with styling divs to mimic the tooltip.

That however highlights another problem that the tooltip still tries to show if its bound dynamically to a null or empty string.

@if (RepaintTooltipFlag)
{
    <TelerikTooltip TargetSelector=".tooltip-target">
    </TelerikTooltip>
}
<p>
    <a title="what is 'lorem ipsum'?" href="https://lipsum.com/">lorem</a>
    ipsum dolor
    <a title="is this a real word?" href="https://en.wikipedia.org/wiki/SIT">sit</a>
    amet.
</p>
<TelerikButton class="tooltip-target" title="@buttonTooltip" OnClick="@AddMoreContent">show more content</TelerikButton>
@if (AllContentVisible)
{
    <p>more content <span title="I will not have a Telerik Tooltip unless you take measures" style="font-weight: bold;">here</span></p>
}
@code{
    string buttonTooltip {get;set;} = "Start tip";
    bool AllContentVisible { get; set; }
    //part of workaround
    bool RepaintTooltipFlag { get; set; } = true;
    async Task AddMoreContent()
    {
        AllContentVisible = true;
        buttonTooltip = "More Content Tip";
        //workaround
        RepaintTooltipFlag = false;
        await Task.Delay(30);
        RepaintTooltipFlag = true;
        //at best, this can be replaced with a reference to the tooltip and a .Refresh() method on it
        //that you can call at points when you need it to re-evaluate targets
    }
}
 

ADMIN

Marin Bratanov

Posted on: 14 Apr 2020 06:39

Hello,

I have updated the title of this idea because it may be done in another way, not necessarily through an explicit method.

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

René

Posted on: 07 Apr 2020 16:20

Hello Marin,

thanks a lot for the workaround!

Regards,

René

Ben Hayat

Posted on: 07 Apr 2020 08:10

Thanks for the info.
I do agree that stale or out of date info. can confuse people and becomes more of a headache.

ADMIN

Marin Bratanov

Posted on: 07 Apr 2020 08:00

Hello Ben,

The search bar when you submit a ticket and on our site generally already searches through the feedback portals. Of course, you can also search the feedback portal explicitly for issues or feature requests that already exist.

As for a KB section - we have one inside the docs: https://docs.telerik.com/blazor-ui/knowledge-base. I tend to not add those workarounds there because it will make for a bunch of articles that will go stale pretty quickly. Each time we fix or implement something, there will be a KB article left that will confuse people in the future. I've seen something like this happen and I am trying to future-proof the information. The downside is that some solutions are only available here in this portal. At this point I feel like I'd rather take on some workload than risk confusing thousands of people in the future with outdated information.

Regards,
Marin Bratanov
Progress Telerik

Ben Hayat

Posted on: 06 Apr 2020 20:31

Hi Marin;

As always, you try hard to provide either a solution or work around cases where needed. I've seen lots of these since you guys started Blazor product in this feedback section.

However, not all of us read every feedback to find out what the problem and solution was and as more feedback comes, these solutions get berried with new feedback;

Do you have a knowledge-base system that we can search through for these problems and solutions that posting them here or ask support?

This can help a lot to reduce duplicate questions.
Thanks!
..Ben

ADMIN

Marin Bratanov

Posted on: 06 Apr 2020 17:27

Hello,

This behavior is expected - the tooltip component has initialized with a certain DOM and it cannot monitor when the Blazor framework will make changes to it. The solution is to make the tooltip refresh. At the moment, this can be done by hiding and re-showing it (example below). I have also renamed this page to showcase what can be done.

Another approach to solve this would be to add a TelerikTooltip to such new content. We do something similar in the following example that also showcases load-on-demand in a grid: https://github.com/telerik/blazor-ui/tree/master/tooltip/in-grid

@if (RepaintTooltipFlag)
{
    <TelerikTooltip TargetSelector="p a[title], span[title]">
    </TelerikTooltip>
}

<p>
    <a title="what is 'lorem ipsum'?" href="https://lipsum.com/">lorem</a>
    ipsum dolor
    <a title="is this a real word?" href="https://en.wikipedia.org/wiki/SIT">sit</a>
    amet.
</p>

<TelerikButton OnClick="@AddMoreContent">show more content</TelerikButton>

@if (AllContentVisible)
{
    <p>more content <span title="I will not have a Telerik Tooltip unless you take measures" style="font-weight: bold;">here</span></p>
}

@code{
    bool AllContentVisible { get; set; }

    //part of workaround
    bool RepaintTooltipFlag { get; set; } = true;

    async Task AddMoreContent()
    {
        AllContentVisible = true;

        //workaround
        RepaintTooltipFlag = false;
        await Task.Delay(30);
        RepaintTooltipFlag = true;

        //at best, this can be replaced with a reference to the tooltip and a .Refresh() method on it
        //that you can call at points when you need it to re-evaluate targets
    }
}

EDIT: Here's an example of adding a tooltip to the new content as well

<TelerikTooltip TargetSelector="p a[title]">
</TelerikTooltip>


<p>
    <a title="what is 'lorem ipsum'?" href="https://lipsum.com/">lorem</a>
    ipsum dolor
    <a title="is this a real word?" href="https://en.wikipedia.org/wiki/SIT">sit</a>
    amet.
</p>

<TelerikButton OnClick="@AddMoreContent">show more content</TelerikButton>

@if (AllContentVisible)
{
    <p id="newContent">more content <span title="I will not have a Telerik Tooltip unless you take measures" style="font-weight: bold;">here</span></p>
    <TelerikTooltip TargetSelector="#newContent span[title]"></TelerikTooltip>
}

@code{
    bool AllContentVisible { get; set; }

    async Task AddMoreContent()
    {
        AllContentVisible = true;
    }
}

Regards,
Marin Bratanov
Progress Telerik