Last Updated: 05 Mar 2024 08:10 by ADMIN
Created on: 10 Nov 2020 16:26
Category: Tooltip
Type: Feature Request
Show/Hide ToolTip Programatically

How can I set the tooltip to show/hide programmatically? right not it only supports hover or click show action.



You can Follow a way to hide the tooltip programmatically here:

You can find a way to hack the show event by triggering a JS click in this KB article:

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

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

<p id="my-targets">
    <strong title="what is 'lorem ipsum'?">lorem</strong>
    ipsum dolor
    <strong title="is this a real word?">sit</strong>

    string ttipTargetSelector = "p#my-targets [title]";
    TooltipShowEvent ShowOnSetting { get; set; } = TooltipShowEvent.Click;
    async Task TriggerTooltip(int targetIndex)
        await _js.InvokeVoidAsync("triggerTooltip", 
                ShowOnSetting == TooltipShowEvent.Click ? true : false


Duplicated Items
Posted on: 16 Feb 2024 13:48

Hello Wei, Richard, Eric, and everyone else following the thread,

It has been a while since our last update, thus posting a new one.

We believe that the desired functionality can be achieved through the new Popover and Popup components, shipped as part of our Q1 - full Release Notes. Both components provide an API for programmatic change of visibility, through their own Show/Hide methods.

As for the Tooltip - by design the component supports multiple targets, as shown in the following demo. Given this, having a Show method could prove to be rather ambiguous as we would have to either show multiple instances of the same tooltip(e.g. the tooltip shows for each target that matches the provided selector), or alternatively expect a specific selector, which targets a single target for which we should display it. As both of these options seem suboptimal, we recommend using the Popover or the Popup components for cases where programmatic control is necessary.

Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Posted on: 02 Feb 2024 16:34
Is this functionality available now: It looks like Tooltip_Close works at least. 
Marin Bratanov
Posted on: 03 Feb 2021 20:46

Hi all,

I have posted a workaround for triggering the tooltip with your own code in the opener post.

@Richard - What you need is actually going to be implemented through this feature: I've added your Vote for it on your behalf to raise its priority, and you can click the Follow button to get status update emails.


Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Posted on: 01 Feb 2021 23:51

Showing or refreshing the tool tip programmatically is required if this component is going to be useful.

For example, when an element that should show a tooltip is part of a grid/list, when that component refreshes, we need to tell the component that shows the tool tip to refresh.