Only close tooltip if mouse is not over target or tooltip

Question

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.

score 49 · Accepted Answer · edited Nov 14 '17 at 16:45

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.

this code snippet : var $id = $(ui.tooltip).attr('id'); // close any lingering tooltips $('div.ui-tooltip').not('#' + $id).remove(); is so valuable that it should be part of the official documentation ... — Yordan Georgiev, Jan 30 '16 at 09:13

score 5 · Answer 2 · answered Jul 02 '13 at 23:17

5

This is a simple solution for div elements:

$(function() {
    $("#mydiv").tooltip({
        effect: 'slide',
        content: 'loading...',
        open: function (event, ui) {
            $(ui.tooltip).appendTo(this);
        }
    });
});

http://jsfiddle.net/4YDGp/10/

answered Jul 02 '13 at 23:17

Stano

8,749
6
30
44

Why does this only work with div elements? – tmkadamcz Feb 27 '21 at 17:47

score 1 · Answer 3 · answered May 21 '13 at 01:12

It isn't built in, as they jQuery UI team didn't think it'd add value. You can read the feature request here. There are some links to projects like this one (demo) that add the effect you're looking for.

You can do this with that minimal plugin:

$('[title|=ptooltip]').pTooltip();

Or you can look into qTip or other more robust plugins.

score 1 · Answer 4 · answered Aug 26 '17 at 18:09

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.

<span id="tip" data-trigger="" rel="tooltip" data-html="true" title="This is the <a href= &quot; https://www.google.com &quot; target=‘_blank’ rel=‘noopener’>tip</a>."> Linked ToolTip </span>

JSFiddle

Only close tooltip if mouse is not over target or tooltip

4 Answers4

Linked