Only close tooltip if mouse is not over target or tooltip
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 callback to see if I'm over a tooltip or a target area, although I would have to then assign another mouseout function.
Here's my jsfiddle: http://jsfiddle.net/Handyman/fNjFF/
I'm working through it now to see what I can come up with.
Answer
Here is the solution I came up with after much searching and testing: http://jsfiddle.net/Handyman/fNjFF/11/
$('#target').tooltip({
items: 'a.target',
content: 'Loading…',
show: null, // show immediately
open: function(event, ui)
{
if (typeof(event.originalEvent) === 'undefined')
{
return false;
}
var $id = $(ui.tooltip).attr('id');
// close any lingering tooltips
$('div.ui-tooltip').not('#' + $id).remove();
// ajax function to pull in data and add it to the tooltip goes here
},
close: function(event, ui)
{
ui.tooltip.hover(function()
{
$(this).stop(true).fadeTo(400, 1);
},
function()
{
$(this).fadeOut('400', function()
{
$(this).remove();
});
});
}
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div id="target">
<a href="#" class="target">Hover over me!</a>
<a href="#" class="target">Hover over me too!</a>
</div>
</body>I was also having a problem with lingering tooltips when there were a bunch of tooltip links in close proximity, so the tooltips would end up stacking or not closing at all, so this closes all other open tooltips when a tooltip is opened.