只有当鼠标不在目标或工具提示上时才关闭工具提示。

Question

只有当鼠标不在目标或工具提示上时才关闭工具提示。

32

使用jQuery UI提示工具，我希望如果鼠标悬停在目标区域或提示框本身上时，可以保持提示框打开状态。

我认为可以使用关闭回调函数来判断鼠标是否在提示框或目标区域上，尽管我将不得不分配另一个mouseout函数。

这是我的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>

我正在努力研究它，看看我能想出什么。

- Francis Lewis

4个回答

5

这是div元素的简单解决方案：

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

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

- Stano

为什么这只能用于 div 元素？ - tmkadamcz

1

我有一个类似的目标，希望拥有一个带有HTML链接的Bootstrap提示框，直到点击其他地方或打开另一个提示框时仍然保持打开状态（这样用户就可以在提示框中点击链接）。

以下是基于先前帖子的解决方案：

/**
  * 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');
   });
 });

HTML代码如下。关键是将数据触发器设置为""以获取带有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>

- Geoffrey Bourne

1

这并不是内置的功能，因为jQuery UI团队认为它不会增加价值。您可以在此处阅读功能请求。有一些像这个（演示）的项目链接，可以添加您正在寻找的效果。

您可以使用这个最小化插件来实现：

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

或者您可以查看qTip或其他更强大的插件。

- Josh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Francis Lewis · Accepted Answer

这是我在经过大量搜索和测试后想出的解决方案：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>

当多个提示链接靠近时，我也遇到了提示持续存在的问题，因此提示框可能会堆叠或根本不关闭，所以这种情况下打开一个提示时将关闭所有其他已打开的提示。