TelerikTooltip Callout Flickering

[Christopher]

I'm using the TelerikTooltip (with tooltipposition: top) to wrap an icon on a page, so that when the icon is hovered, the tooltip appears. It appears that when the size of the page is such that the tooltip would overlap with the edge of the page, the tooltip adjusts its location. When it does so, it seems that telerik blazor initially attempts to place the callout (using css left) at the middlepoint of the tooltip, then corrects itself, and places the callout at the correct location above the item it is attached to. This shows visually as the callout appearing in one location, then flickering and appearing in another location. I have tried a few troubleshooting steps, including setting the css of the tooltip callout to left: unset, which worked perfectly on my local version of our application, but did not work once it was pushed to our application environment. In the local, this change made it so that the callout would not be placed in the midpoint initially but would skip that step and be correctly placed above the icon as desired. In the application environment however, it would put the callout at the leftmost point of the tooltip, and then do the same flickering, and then put it in the correct location. This makes me think that the issue could be solved if I could find a way to skip the step where it attempts to put the callout in the midpoint of the tooltip. However, I'm unable to find a way to make it do that.

My question is: is there a known workaround for this issue which I can use, or is this something that can be fixed by telerik? Or are there any suggestions of other things I can try, given that using "left: unset" in css was pretty close to working?

Here is the code used for the icon's razor file. 

<TelerikTooltip Class="infoIcon-tooltip" TargetSelector="@($"#{IconId}")" ShowOn="@TooltipShowEvent.Hover" Position="TooltipPosition.Top"></TelerikTooltip>
<span id="@IconId" class="infoIcon" title="@Title"/>

Here is the css used for the tooltip and its callout (which did not quite work correctly):

.infoIcon-tooltip .k-tooltip {
    background: var(--icon-tooltip-grey);
    border: 0.5px solid var(--icon-tooltip-grey);
    border-radius: 4px;
}

.infoIcon-tooltip .k-tooltip-content {
    font-family: Tenorite,sans-serif,Arial;
    font-size: 16px;
    word-wrap: break-word;
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    color: white;
}


.infoIcon-tooltip .k-tooltip .k-callout {
    color: var(--icon-tooltip-grey);
    left: unset;
}

[Georgi]

Hello Christopher,

From the code you shared, I don’t see anything wrong. However, the difference in behavior between your local and application environments suggests there may be differences in the applied styles or layout.

Could you please double-check if there are any differences in the environments, such as positioning-related styles? It would also help if you could share a small runnable example that reproduces the issue, along with an image or video/gif that shows the flickering behavior and how the elements are positioned when it happens.

On a side note, I want to mention a known issue we have logged in our feedback portal: https://feedback.telerik.com/blazor/1626061-tooltip-flashes-if-its-element-is-on-top-of-the-viewport

It seems very similar to the problem you described. Can you review it and confirm if it is the same issue? If so, you can vote for it to help raise its priority.

Regards,
Georgi
Progress Telerik

[Christopher]

Hi Georgi,

Thanks for your reply. The issue you linked does look very similar, but my issue is a little bit different, as it's with the horizontal location of the tooltip rather than the vertical location. It looks similar enough though that I wouldn't be surprised if the two issues had the same root cause. There are no differences in the environments as far as positioning related styles. I'm not actually sure how to produce a runnable example outside of our environment, and company policy prevents me from sharing much more code than I already have, but we're not doing anything extremely outside the box as far as I'm aware. Here's a video of mine as requested, in case it gives you any insight. Notably, in this video you'll see the callout first appear at the far left of the tooltip box, and then flicker and appear above the icon it's coming from. This is because of the fix I attempted using left: unset. Before I added that, it would appear in the dead middle of the tooltip box, which was usually a bit offset from the icon, depending on the sizing of the browser window, and then flicker and appear correctly above the icon. From my testing, I've seen that I can reproduce this issue with any given teleriktooltip in our application if I set it to ToolTipPosition: Top, and then adjust the window size so that it has to move the callout.

[Georgi]

Hi Christopher,

The behavior you’re experiencing matches the issue in our Feedback Portal. Once that bug is resolved, it should also address the behavior you’re seeing. If you want to avoid the repositioning effect until the fix is released, I recommend hiding the callout entirely, as described in this Knowledge Base article: Hide the Tooltip Callout - Telerik Blazor Knowledge Base.

Regards,
Georgi
Progress Telerik