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

标签 jquery jquery-ui jquery-ui-tooltip

使用 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/

相关文章:

javascript - 作为一名精通 HTML 和 CSS 的设计师,开始使用 jquery 插件而不是学习 javascript 是否安全?我不是程序员

javascript - jQuery 菜单中的滚动条

javascript - 如何向 FLOT 图表添加工具提示

jquery - 验证插件在更新面板中不起作用

javascript - 使用 Sticky-kit 粘贴 div 并在 AngularJS 中的特定点释放它

javascript - TypeError : $(. ..).dialog 不是 devserver 上的函数

jquery - 在 jquery token 输入中创建 token

javascript - 更改 dateRangePicker 的日期格式

javascript - jQuery UI 工具提示 - 动态内容

javascript - 如何删除 Bootstrap 上显示上次使用日期的工具提示?