0

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

C.List
  • 657
  • 8
  • 16

1 Answers1

0

This is exactly what you need I guess... Tooltip / Events, Tooltip / Loading content with AJAX

        $("#products").kendoTooltip({
            filter: "a",
               content: {
                  url: "../content/web/tooltip/ajax/ajaxContent1.html"
               },
               width: 220,
               height: 280,
               position: "top",
               requestStart: function(e) {
                  e.options.url = kendo.format(urlFormat, e.target.data("id"));
              }
        });

If you check in network tab in your browser, then you'll be able to see that the names of the products are loaded inside tooltip when you hover above the image.

Similarly, you can load the tooltip content.

  • autoHide: false

set this option while declaring tooltip. Check this link: Tooltip / Events

$("#autohide-false").kendoTooltip({
    autoHide: false,
    show: onShow,
    hide: onHide,
    position: "top",
    content: "Hello!"
});

The content part can be loaded as shown in the above example.

Paritosh
  • 11,144
  • 5
  • 56
  • 74