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