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

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/