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>

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.

How can I set the tooltip to show/hide programmatically? right not it only supports hover or click show action.

---

ADMIN EDIT

You can Follow a way to hide the tooltip programmatically here: https://feedback.telerik.com/blazor/1476364-close-tooltip-via-method.

You can find a way to hack the show event by triggering a JS click in this KB article: https://docs.telerik.com/blazor-ui/knowledge-base/common-validation-error-in-tooltip.

Here is an example that shows how you can trigger the tooltip to show for a particular target:

@inject IJSRuntime _js

<script suppress-error="BL9992">
    function triggerTooltip(index, selector, showOnClick) {
        var targets = document.querySelectorAll(selector);
        if (targets && targets.length >= index) {
            var desiredTarget = targets[index];//feel free to get the desired target in any other way
            setTimeout(function () {
                var evt = document.createEvent('MouseEvent');
                var evtToSimulate = showOnClick ? "click" : "mouseenter";
                evt.initEvent(evtToSimulate, true, false);
                desiredTarget.dispatchEvent(evt);
            }, 20);
        }
    }
</script>

<TelerikButton OnClick="@( async () => await TriggerTooltip(0) )">Trigger tooltip for the first target</TelerikButton>
<TelerikButton OnClick="@( async () => await TriggerTooltip(1) )">Trigger tooltip for the SECOND target</TelerikButton>

<TelerikTooltip TargetSelector="@ttipTargetSelector" ShowOn="@ShowOnSetting">
</TelerikTooltip>



<p id="my-targets">
    <strong title="what is 'lorem ipsum'?">lorem</strong>
    ipsum dolor
    <strong title="is this a real word?">sit</strong>
    amet.
</p>

@code{
    string ttipTargetSelector = "p#my-targets [title]";
    TooltipShowEvent ShowOnSetting { get; set; } = TooltipShowEvent.Click;
    async Task TriggerTooltip(int targetIndex)
    {
        await _js.InvokeVoidAsync("triggerTooltip", 
                targetIndex, 
                ttipTargetSelector, 
                ShowOnSetting == TooltipShowEvent.Click ? true : false
             );
    }
}

---

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?