If the element of the tooltip is on top of the screen (almost outside of the viewport), hovering the remaining part of the element makes the tooltip create a flashing effect.

Please watch the attached video. 

When the Tooltip TargetSelector is button[title] and you change the Calendar's view mode, the Tooltip text remains the initial one. Steps to reproduce:

https://blazorrepl.telerik.com/cIvORFuC16Zgi9yP55

1. Hover over the view navigation button. The Tooltip text is Choose a month, which is correct.
2. Change the view.

Now the navigation button text is 2024 and the Tooltip should display Choose an year, but instead, it displays Choose a month. If you change the view again the button text is 2020-2029 and the Tooltip text remains Choose a month, when it should display Choose a decade.

===ADMIN EDIT===

In the meantime, the workaround is to keep using one Tooltip for the whole application and have another one that targets only the navigation button in the Calendar. Here is an example: https://blazorrepl.telerik.com/GobanlEC46JfsnNk08 

1. Place two spans with titles right next to each other.

2. Add Telerik Tooltip with target span[title]

3. Hover over first span -> Tooltip is displayed correctly

4. Move Mouse Cursor from first span to second span -> Tooltip of second span is displayed twice: Once at correct position and once at top left of screen.

I have a div which has a couple of buttons contained within it on the lower left corner. I have a TelerikTooltip with the target selector pointed to my div. Most of the time the tooltip works fine but I have found that if I move the mouse onto the div from the lower left corner where the buttons are, the TelerikTooltip shows up correctly while the mouse is over the buttons but when I move the mouse farther into the div and away from the buttons the TelerikTooltip gets hidden and a default tooltip is displayed.

It behaves this way whether I use a title on the div or a template on the TelerikTooltip.

When a position is specified the tooltip is rendered initially aside from the target element before displaying at the correct position

Hi !

After upgrading to the lastest version (6.1.0) we have an issue with the tootip.

The small arrow that points towards the elements that have the title attribute is not showing where it should (the arrow stays centered).

Here is an example:

Add the ability to display the Tooltip on target focus, similar to how we can configure display on mouse enter or click.

Currently, a possible workaround is to simulate user mouse moves:

@inject IJSRuntime js

<input />

<span id="span1" title="Tooltip 111"
      @onfocusin="@( (FocusEventArgs args) => OnTextBoxFocusIn(args, "#span1") )">
    <TelerikTextBox @bind-Value="@TextBoxValue"
                    OnBlur="@( () => OnTextBoxBlur("#span1") )"
                    Width="200px" />
</span>

<span id="span2" title="Tooltip 222"
      @onfocusin="@( (FocusEventArgs args) => OnTextBoxFocusIn(args, "#span2") )">
    <TelerikTextBox @bind-Value="@TextBoxValue"
                    OnBlur="@( () => OnTextBoxBlur("#span2") )"
                    Width="200px" />
</span>

<input />

<TelerikTooltip TargetSelector="span[title]" />

<script suppress-error="BL9992" nonce="BL9992">//
    function showTooltip(selector) {
        var target = document.querySelector(selector);
        if (target) {
            setTimeout(function () {
                var event = document.createEvent("MouseEvent");
                event.initEvent("mouseenter", true, false);
                target.dispatchEvent(event);
            });
        }
    }

    function hideTooltip(selector) {
        var target = document.querySelector(selector);
        if (target) {
            setTimeout(function () {
                var event = document.createEvent("MouseEvent");
                event.initEvent("mouseleave", true, false);
                target.dispatchEvent(event);
            });
        }
    }
//</script>

@code {
    private string TextBoxValue { get; set; } = "Focus me...";

    private async void OnTextBoxFocusIn(FocusEventArgs args, string selector)
    {
        await js.InvokeVoidAsync("showTooltip", selector);
    }

    private async Task OnTextBoxBlur(string selector)
    {
        await js.InvokeVoidAsync("hideTooltip", selector);
    }
}

When I have some dynamic content inside the tooltip template, the tooltip seems not to be re-rendering. E.g. when I have a tooltip with a text input and button and wish to disable the button when no text is entered, the tooltip seems to be only refreshing after closing and re-opening it. Simplified example:

<TelerikTooltip TargetSelector=".search-tooltip" Position="TooltipPosition.Bottom" ShowOn="TooltipShowEvent.Click">
	<Template>
		<TelerikTextBox @bind-Value="@SearchText"></TelerikTextBox>
		<TelerikButton OnClick="@Search" Enabled="@(!string.IsNullOrEmpty(SearchText))">Search</TelerikButton>
	</Template>
</TelerikTooltip>

Even tried using the ValueChanged event of the TelerikTextBox and calling the StateHasChanged() method but had the same result (the enabled/disabled state of button only changed after closing&re-opening the tooltip).

I would expect the binding and re-rendering to work as normally in Blazor. Is there a way to manually 'call refresh' on the tooltip?

Hover the mouse several times in a row at element c on the demo stand. OS Windows 10, Browsers: Chrome Version 87.0.4280.141 (Official Build) (64-bit) + Firefox Developer 85.0b9 (64-bit).

Tell me why the component periodically has 2 tooltips? This anomaly is also observed on your demo stand.

Team,

Currently I am using Telerik UI Blazor with 3.7.0 version, few cases and intermittently TooltipShowEvent.Click is not working and tooltip is not getting displayed and unable to find root cause for it.

Could you please assist what is causing for this behaviour and feasible solution?

Below is sample code snippet where we use 3 tabs

<TelerikTabStrip Class="tmGraphTabStrip" ActiveTabIndex="@ActiveTab" ActiveTabIndexChanged="@ActiveTabChanged" @ref="@TabRef">
@for (var i = 0; i < 4; i++)
 {
<TabStripTab Title="@TabName" Class="tmTabHeaderCellStyle">
<TelerikGridLayout RowSpacing="20px" ColumnSpacing="1px" Class="grid-CardlayoutNew">
@*
display data in gridlayout structure for each row/column along with tooltip, we are able to see div selector and target selector Ids from Dev Tools browser
*@
</TelerikGridLayout>
</TabStripTab>
}
</TelerikTabStrip>

Ex:

<TelerikTooltip TargetSelector="@ToolTipCurselector" ShowOn="@TooltipShowEvent.Click" Position="TooltipPosition.Top">
</TelerikTooltip>

The scenario involves a Grid and a Tooltip.

While doing sorting on the Grid quickly on 2,3 columns, I get the following error:

TypeError: Cannot read properties of undefined (reading 'anchor')
  StackTrace:
  at t.8219.constructor.closePopup (https://blazor.cdn.telerik.com/blazor/7.0.0/telerik-blazor.min.js:22:1597184)
    at t.8219.constructor.onMouseDown (https://blazor.cdn.telerik.com/blazor/7.0.0/telerik-blazor.min.js:22:1595916)