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?