Declined
Last Updated: 09 Oct 2024 11:05 by ADMIN
I would like to use a target selector that has some special symbols such as ! and @. Currently, the querySelectorAll() does not accept the !sample-class as a valid selector, but the getElementsByClassName accepts it. 
Declined
Last Updated: 25 Sep 2024 10:30 by ADMIN
Created by: Vinod
Comments: 2
Category: Tooltip
Type: Bug Report
0

Team,

Currently I am using Telerik UI Blazor with 3.7.0 version, few cases and intermittently TooltipShowEvent.Click is not working and tooltip is not getting displayed and unable to find root cause for it.

Could you please assist what is causing for this behaviour and feasible solution?

Below is sample code snippet where we use 3 tabs

<TelerikTabStrip Class="tmGraphTabStrip" ActiveTabIndex="@ActiveTab" ActiveTabIndexChanged="@ActiveTabChanged" @ref="@TabRef">
@for (var i = 0; i < 4; i++)
 {
<TabStripTab Title="@TabName" Class="tmTabHeaderCellStyle">
<TelerikGridLayout RowSpacing="20px" ColumnSpacing="1px" Class="grid-CardlayoutNew">
@*
display data in gridlayout structure for each row/column along with tooltip, we are able to see div selector and target selector Ids from Dev Tools browser
*@
</TelerikGridLayout>
</TabStripTab>
}
</TelerikTabStrip>

Ex:

<TelerikTooltip TargetSelector="@ToolTipCurselector" ShowOn="@TooltipShowEvent.Click" Position="TooltipPosition.Top">
</TelerikTooltip>

Completed
Last Updated: 14 Aug 2024 06:01 by ADMIN
Release 2024 Q4 (Nov)

Hi !

After upgrading to the lastest version (6.1.0) we have an issue with the tootip.

The small arrow that points towards the elements that have the title attribute is not showing where it should (the arrow stays centered).

Here is an example:

<TelerikTooltip TargetSelector=".tooltip-target" ShowOn="@TooltipShowEvent.Hover"></TelerikTooltip>
<h1>example</h1>
<TelerikButton class="tooltip-target" title="it fits">
    Text
</TelerikButton>
<TelerikButton class="tooltip-target second" title="A longgggggggggggggggggggggggggggggg test that will not work ...">
    Text
</TelerikButton>
<style>
    .second {
        margin-left: -5px;
    }

</style>

Regards,

Maxime

Completed
Last Updated: 05 Aug 2024 13:30 by ADMIN
Release 6.1.0
Hi,

The issue is that the tooltip position doesn't change when the user move the cursor between two elements with small proximity. 

The best example is Telerik's own Tooltip demo Blazor Components Demos and Examples - Telerik UI for Blazor. More often than not when moving between Karachi and Mumbay/Bombay tha tooltip doesn't shift position even though the text changes.
Completed
Last Updated: 30 Jul 2024 08:52 by ADMIN
Release 5.0.0 (15 Nov 2023) (R1 PI1)
Created by: Jeffrey
Comments: 11
Category: Tooltip
Type: Bug Report
11

I'm using the ToolTip component to display tooltips for anything that has a "title":

<TelerikTooltip TargetSelector="[title]"></TelerikTooltip>

I've got a popup window with a close button that displays the tooltip "Close".

Upon clicking the button and the window closing, the tooltip remains until I click something or another tooltip appears.

 

 

 

Won't Fix
Last Updated: 31 May 2024 06:08 by ADMIN
Created by: Jason
Comments: 3
Category: Tooltip
Type: Bug Report
2

I need to make a tooltip more accessible.

---

ADMIN EDIT

The first thing you can do is use the aria-describedby on the tooltip targets and use its value in the tooltip Id parameter to help screen readers. It is up to the screen reader to detect the change in the DOM and read out the new content.

This item is to add attributes to the tooltip such as role="tooltip", aria-live="polite", role="presentation", aria-hidden="false". The exact attributes will depend on more detailed research and may differ from what I have listed here.

---

Completed
Last Updated: 28 May 2024 12:13 by Emmett
Release 2.27.0

Unfortunately the tooltip component does only work for elements that are present at first rendering.

If elements are surrounded by an if-condition which becomes true at a later point in time, the tooltip is not displayed.

Our usecase:  We have tables where some data is computed after displaying the rest of the table.  The computing and displaying works and the title is there (and shown in the default windows tooltip) but the Telerik tooltip is not displayed.

Completed
Last Updated: 02 Apr 2024 10:40 by ADMIN
Release 2024 Q2 (May)
Created by: Bob
Comments: 7
Category: Tooltip
Type: Feature Request
61
Is there any way to delay the showing of the tooltip when showing on hover?

I want it to only show the tooltip tip if I hover over an item for more than some time period (i.e. 3 seconds)
Declined
Last Updated: 05 Mar 2024 08:10 by ADMIN
Created by: Wei
Comments: 4
Category: Tooltip
Type: Feature Request
27

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

---

Completed
Last Updated: 29 Nov 2023 15:00 by ADMIN
Release 5.1.0 (31 Jan 2024) (R1 2024)
Created by: René
Comments: 0
Category: Tooltip
Type: Bug Report
3

Tooltip does not show if moving from one element with Tooltip to another and both elements are placed directly next to each other.

Example: If a number of Buttons (with title) are placed right next to each other if mouse is moved over the first one the tooltip is displayed correctly. If the mouse is moved to the next one the first tooltip closes but the second one does not show. Moving on to the third button the tooltip is displayed correctly again.

Unplanned
Last Updated: 04 Oct 2023 15:52 by Miroslav
Created by: Miroslav
Comments: 0
Category: Tooltip
Type: Bug Report
2

If the element of the tooltip is on top of the screen (almost outside of the viewport), hovering the remaining part of the element makes the tooltip create a flashing effect.

Please watch the attached video. 

Completed
Last Updated: 13 Sep 2023 10:55 by ADMIN
Release 4.6.0 (11 Oct 2023) (R3 2023)

When a position is specified the tooltip is rendered initially aside from the target element before displaying at the correct position

Reproduction: https://blazorrepl.telerik.com/wnaUkrFc04umFPWr03

Open the example and hover over the target element a few times.
Unplanned
Last Updated: 22 Jun 2023 06:38 by Florian
Created by: Florian
Comments: 0
Category: Tooltip
Type: Feature Request
5
Currently, tooltips appear when the cursor hovers over a target element and close when the cursor moves away from the target element. However, it would be beneficial to enhance this functionality by allowing tooltips to remain open even when the cursor is positioned over the tooltip itself. 
Duplicated
Last Updated: 24 Jan 2023 15:08 by Yazan
Created by: Tyler
Comments: 3
Category: Tooltip
Type: Feature Request
12

I would like to be able to do something like the following - cause the tooltip to close from my code:

<TelerikTooltip TargetSelector="#tooltip1" ShowOn="@TooltipShowEvent.Click" @ref="@TooltipRef">     
            <Template>
                 Content Here
                <button type="button" class="btn btn-primary" @onclick="tipClose">Save</button>                
            </Template>
</TelerikTooltip>

<a href="#" id="tooltip1" class="btn btn-secondary">open</a>

@code{
 Telerik.Blazor.Components.TelerikTooltip TooltipRef { get; set; }

void tipClose()
    {
       // TooltipRef ?
    }


}

Duplicated
Last Updated: 12 May 2022 11:49 by ADMIN
Created by: Jeffrey
Comments: 3
Category: Tooltip
Type: Feature Request
4
Would it be possible to add a duration parameter to the tooltip so it will automatically hide?
Unplanned
Last Updated: 05 May 2022 07:25 by Alexander
Created by: Alexander
Comments: 0
Category: Tooltip
Type: Feature Request
3

Please consider the ToolTip's ability to track changes in its target and update its own position accordingly.

A good example for this is the integration between the ToolTip and the Slider drag handle.

Completed
Last Updated: 27 Oct 2021 08:49 by ADMIN
Release 2.28.0

Using a target selector for HTML elements with a specific attribute within an SVG does not work

The following snippet worked correctly in 2.26.0 and older versions but does not work in 2.27.0

<TelerikArcGauge>
    <ArcGaugeCenterLabel>
        <Template>
            @(context.Pointers[0].Value)
        </Template>
    </ArcGaugeCenterLabel>
    <ArcGaugeScales>
        <ArcGaugeScale Min="0" Max="100">
        </ArcGaugeScale>
    </ArcGaugeScales>
    <ArcGaugePointers>
        <ArcGaugePointer Color="#FFE162" Value="@FirstPointerValue"></ArcGaugePointer>
    </ArcGaugePointers>
</TelerikArcGauge>

<TelerikTooltip TargetSelector="path[stroke='#FFE162']" Position="TooltipPosition.Top" ShowOn="@TooltipShowEvent.Hover" Id="first-pointer">
    <Template>
        <p>Value is: @FirstPointerValue</p>
    </Template>
</TelerikTooltip>

@code {
    public int FirstPointerValue { get; set; } = 20;
}

Best Regards,

Radko

Completed
Last Updated: 20 Oct 2021 12:41 by ADMIN
Release 2.28.0
Created by: Oscar
Comments: 1
Category: Tooltip
Type: Bug Report
2

Since 2.27 I have a weird behaviour when I try to open a tooltip that should be shown on click. This is a sample:

 

<span id="tooltip-here">
    <span style="background-color: gray">Text 1</span>
    gap
    <span style="background-color: gray">Text 2</span>
</span>
<TelerikTooltip TargetSelector="#tooltip-here" ShowOn="TooltipShowEvent.Click" />

 

In 2.26 the tooltip was shown when I clicked in any element inside the outer span. Check file 226.gif.

Now, in 2.27 it is being shown just when I click on the "gap". Check file 227.gif.


Thanks!

Duplicated
Last Updated: 04 Oct 2021 10:09 by ADMIN

Is there a way to add some delay to the TelerikTooltip component show event? I would like to force the user to hover in the element for a couple of seconds before he can see the tooltip.

Like in the ajax tooltip demo.

Completed
Last Updated: 03 Aug 2021 13:41 by ADMIN
Release 2.26.0

I have a div which has a couple of buttons contained within it on the lower left corner. I have a TelerikTooltip with the target selector pointed to my div. Most of the time the tooltip works fine but I have found that if I move the mouse onto the div from the lower left corner where the buttons are, the TelerikTooltip shows up correctly while the mouse is over the buttons but when I move the mouse farther into the div and away from the buttons the TelerikTooltip gets hidden and a default tooltip is displayed.

It behaves this way whether I use a title on the div or a template on the TelerikTooltip.

1 2