jquery - 仅当鼠标未位于目标或工具提示上方时才关闭工具提示-6ren

jquery - 仅当鼠标未位于目标或工具提示上方时才关闭工具提示

转载作者：行者123 更新时间：2023-12-03 21:31:57

使用 jQuery UI 工具提示，如果我超出目标，或者超出工具提示本身，我希望保持工具提示打开。

我想我可以使用关闭回调来查看我是否位于工具提示或目标区域上方，尽管我必须分配另一个鼠标悬停函数。

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

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

最佳答案

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

当有一堆工具提示链接非常接近时，我还遇到了挥之不去的工具提示问题，因此工具提示最终会堆叠或根本不关闭，因此当工具提示打开时，这会关闭所有其他打开的工具提示。

关于jquery - 仅当鼠标未位于目标或工具提示上方时才关闭工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16660576/