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);
}
}