Only close tooltip if mouse is not over target or tooltip

前端未结

关注

 4  1185

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

相关标签:

4条回答

余生分开走

2020-12-05 04:59

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.

0 讨论(0)

心在旅途

2020-12-05 05:03

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

0 讨论(0)

后悔当初

2020-12-05 05:06

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

夕颜

2020-12-05 05:21

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/

0 讨论(0)