I want to use jQuery UI tooltips. In the tooltip I want that there will be a link in HTML.
I saw this question that says how to work with HTML inside the tooltip, but there is a problem when I want to add a link inside the tooltip.
When I use the cursor to enter the tooltip for clicking the link, the tooltip disappears (because I mouseout from the element assigned to the tooltip).
What can I do?
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
Example: jsFiddle
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();
})
});
}
});
});