Tooltip with interactive (clickable) content

4 posts, 0 answers
  1. Christopher
    Christopher avatar
    1 posts
    Member since:
    Jan 2013

    Posted 03 Feb 2016 Link to this post

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





  2. Alexander Popov
    Alexander Popov avatar
    1445 posts

    Posted 08 Feb 2016 Link to this post


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

    Alexander Popov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Troy
    Troy avatar
    34 posts
    Member since:
    Sep 2015

    Posted 15 Sep 2016 Link to this post

    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.

  4. Dimiter Topalov
    Dimiter Topalov avatar
    1297 posts

    Posted 19 Sep 2016 Link to this post

    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:

    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:

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

    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top