jquery UI tooltip html with links

Question

I want to use jquery UI tooltip.

In the tooltip i want that there will be a link in html.

I saw this post (Jquery UI tooltip does not support html content) that says how to work with html inside the tooltip.

But there is a problem when I want to add link inside the tooltip.

When I came with the cursor to enter the tooltip for clicking the link, the tooltip disappeared (because I mouseout from the element the assigned to the tooltip.

What can I do?

Thanks.

UPDATE:

  $(function () {
      $(document).tooltip({
          content: function () {
              return $(this).prop('title');
          }
      });
  });

Example: http://jsfiddle.net/jLkcs/

Answer 1

Looks like your going to have to get your hands dirty and edit the jQuery code so that on the mousout event it doesn't close if you are hovering over the tooltip itself.

Or as an alternative you could look at the twitter bootstrap tooltip and popover, i think from memory you can pass an event trigger type to the popover.

http://getbootstrap.com/2.3.2/javascript.html#popovers

Answer 2

Because of the nature of the jQuery UI tooltip is not possible out of the box.

You can add some trick (found on jQuery forum, but link lost...) to let the tooltip delay its closing and let you have the time to click the links.

Used api docs: http://api.jqueryui.com/tooltip/

Code:

$(function () {
    $(document).tooltip({
        content: function () {
            return $(this).prop('title');
        },
        show: null, 
        close: function (event, ui) {
            ui.tooltip.hover(
            function () {
                $(this).stop(true).fadeTo(400, 1);
            },    
            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                })
            });
        }
    });
});

Demo: http://jsfiddle.net/IrvinDominin/jLkcs/5/

Answer 3

Irvin Dominin's accepted answer was a huge help for me on this. I've expanded on it if anybody has the same additional requirement that I had.

I also wanted to put a delay on the tooltip display. Because the "show" option was set to null, I needed to replicate it. (the show option is set to null to stop the popup visibly redrawing when the mouse moves from the tooltip back to the calling link).

I needed to put a delay, since a page I was developing had lots of user tooltips, and instant display was a bit jarring when mousing across the page.

My solution was to use the open event to hide the tooltip and add a timeout before displaying it again. The exception to this was if the same tooltip was already open, and to sort this I added a true/false data attribute to each element when opening/closing it (getting the source element from the open and close functions wasn't easy, but I think it's right).

Disclaimer: I'm no master at JQuery, and there may well be a much easier way to replicate this. I get stuck down rabbit-holes with code sometimes, so the code below might be bad advice...

var ttWait; // global variable for tooltip delay
$(document).tooltip({
    items: '.userSummaryLink',
    show: null,
    content: function() {  // build the popup content
        return $(this).prop('title');
    },
    open: function (event, ui) { // simulating the show option (that needs to be null to stop the popup closing and reopening when user mouses from popup back to source
        var el = $(event.originalEvent.target);
        if( !el.data('tooltip') ) { // only put open delay if SAME popup not already open
            ui.tooltip.hide(); // stop popup opening immediately
            ttWait = setTimeout(function() { // show popup after delay
                el.data("tooltip", true); // acknowledge popup open
                ui.tooltip.fadeIn("400");
            }, 250);
        }
    },
    close: function (event, ui) {
        var el =  $(event.originalEvent.target);
        el.data("tooltip", false); // acknowledge popup closed (might be over-ridden below)
        clearTimeout(ttWait); // stop tooltip delay function
        ui.tooltip.hover(
            function () {
                $(this).stop(true).fadeTo(400, 1);
                el.data("tooltip", true); // acknowledge popup still open
            },

            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                });
            });
    }
});

Note that I also added some classes and positioning to my popups to put an arrow to the calling link. Plus my content was derived from a user object file loaded on the page. I've removed these to hopefully make it easier to use.