Tooltip with interactive (clickable) content

[Christopher]

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

  

 

 

[Alexander Popov]

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

 

 

[Troy]

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.

[Dimiter Topalov]

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