Only close tooltip if mouse is not over target or

2019-01-17 06:10发布

站内问答 / jQuery
1722 4 5

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.

4条回答
做个烂人
2楼-- · 2019-01-17 06:53

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) 举报
一纸荒年 Trace。
3楼-- · 2019-01-17 06:55

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) 举报
甜甜的少女心
4楼-- · 2019-01-17 07:01

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) 举报
我只想做你的唯一
5楼-- · 2019-01-17 07:05

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)