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