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