Planned
Last Updated: 19 Sep 2021 15:16 by ADMIN
Scheduled for 3.0.0
Wei
Created on: 10 Nov 2020 16:26
Category: Tooltip
Type: Feature Request
6
Show tooltip programatically

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

---

ADMIN EDIT

You can Follow a way to hide the tooltip programmatically here: https://feedback.telerik.com/blazor/1476364-close-tooltip-via-method.

You can find a way to hack the show event by triggering a JS click in this KB article: https://docs.telerik.com/blazor-ui/knowledge-base/common-validation-error-in-tooltip.

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

---

2 comments
ADMIN
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: https://feedback.telerik.com/blazor/1460642-the-tooltip-should-be-able-to-re-evaluate-targets-tooltip-not-working-for-elements-not-present-at-first-rendering. 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.

 

Regards,
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 https://learn.telerik.com/.

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