Menu
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/
$(function() { $('#target').tooltip({ items: 'a.target', content: 'just some text to browse around in' }); });<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> <div id="target"> <a href="#" class="target">Hover over me!</a> <a href="#" class="target">Hover over me too!</a> </div>I'm working through it now to see what I can come up with.
255
Alternatively known as a balloon, help balloon, flyover help, or ScreenTip, a Tooltip is a text description near an object. The tooltip is displayed when the user hovers the mouse cursor over the object.
Single element To make an element display its tooltip permanently, we use its showTooltipOn property. To make tooltip always be shown, set it to "always" .
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.
199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With