Using the jQuery UI tooltip, I would like to keep the tooltip open if I\'m over the target, or if I\'m over the tooltip itself.
I\'m thinking I can use the close cal
I had a similar goal of having a bootstrap tooltip with an HTML link stay open until clicking somewhere else or open another tooltip (so the user can click the link in the tool tip).
Here is my solution based on some previous posts:
/**
* For tooltips with links, don't remove hover until click somewhere else or open another tooltip
*/
$(function() {
// Show tooltip with html link
$('#tip').on("mouseover", function() {
$('#tip').tooltip('show');
});
// If open any other tooltip, close the one with the link.
$('[rel="tooltip"]').not('#tip').on("mouseover", function() {
$('#tip').tooltip('hide');
});
// If click any where hide tooltip with link
$(document).click(function() {
$('#tip').tooltip('hide');
});
});
The HTML for the looks like this. The key is having the data-trigger set to "" for the tip with the HTML.
Linked ToolTip
JSFiddle