This is a migrated thread and some comments may be shown as answers.

Tooltip with interactive (clickable) content

3 Answers 142 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Christopher
Top achievements
Rank 1
Christopher asked on 03 Feb 2016, 05:26 PM

I'd like my tooltip to stay open if the mouse is above the tooltip target *or* if it is above the tooltip content (which is loading dynamically), so that the use can move the mouse from the target onto the tooltip and click on links in the content.

A good example of EXACTLY what I'm looking for is the popup that comes up in Facebook when you hover on a Friend on the right side of the page... you get an interactive popup.

I know that I can do this by setting AutoHide off and adding a "close" button to the tooltip content, but the users don't want that, (it would also be impractical as it the tooltips are in a grid and sliding the mouse over the grid could easily lead to loads of tool tips opening up and getting stuck open).

Has anyone done this? Care to share your JS?
I'm surprised it's not a built-in an option for the widget...

Cheers,
Chris

  

 

 

3 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 08 Feb 2016, 12:09 PM
Hello,

This behavior is indeed not supported out of the box. You can achieve similar behavior using a custom solution, as illustrated here.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Troy
Top achievements
Rank 1
answered on 15 Sep 2016, 05:58 PM

I have what I think is the same issue.  We had some items decorated with kendoTooltips which activated via showOn "click", and displayed some ajax-loaded content which included a hyperlink.  With the default positioning, the content is directly below the item, and the natural reaction is to move the mouse down to click the hyperlink.  This actually works some of the time, depending on the speed and care with which one moves the mouse; the rest of the time the tooltip disappears as one tries to enter it; it is possible that the ratio varies among OS and browser combinations.  Here is a simple example.

I had thought that the tooltip content was intended to be entered, but was being flaky.  But it sounds like the intent is actually that the tooltip should disappear as the mouse pointer leaves the parent area and enters the tooltip area?  In that case, I assume that when it doesn't disappear, it is some sort of vagary in how "mouseout" and other events are being generated and handled by the browser and Kendo?  

I'll look at the workaround above, but a built-in option to let tooltip content be considered part of the tooltip so that hyperlinks and other clickable content are usable in thise sort of case could be a welcome addition.

0
Dimiter Topalov
Telerik team
answered on 19 Sep 2016, 05:43 AM
Hi Troy,

All of your observations regarding the designed functionality of the Kendo UI Tooltip are correct. The built-in way to interact with its content after the cursor leaves the target element, is the autoHide option:

http://docs.telerik.com/kendo-ui/api/javascript/ui/tooltip#configuration-autoHide

You can also check out the workaround, provided by my colleague in the previous response.

If you feel that the widget might benefit from an additional feature or functionality, please submit your idea to our UserVoice portal:

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback

It is monitored closely, and the most popular requests are considered for implementation for a future release of our product. Thank you in advance.

Regards,
Dimiter Topalov
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Tags
ToolTip
Asked by
Christopher
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Troy
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or