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

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

<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>