如果鼠标不在目标或工具提示上，则仅关闭工具提示 [英] Only close tooltip if mouse is not over target or tooltip

查看：23 发布时间：2021/12/17 21:43:00 jquery jquery-ui jquery-ui-tooltip

本文介绍了如果鼠标不在目标或工具提示上，则仅关闭工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 jQuery UI 工具提示，如果我超过目标，或者如果我超过工具提示本身，我想保持工具提示打开.

我想我可以使用 close 回调来查看我是否在工具提示或目标区域上方，尽管我随后必须分配另一个鼠标移出功能.

这是我的 jsfiddle:http://jsfiddle.net/Handyman/fNjFF/

$(function(){$('#target').工具提示({项目:'a.target'，内容:'只是一些文本浏览'});});

<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="目标"><a href="#" class="target">悬停在我身上！</a><a href="#" class="target">也悬停在我身上！</a>

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

解决方案

这是我经过大量搜索和测试后得出的解决方案:http://jsfiddle.net/Handyman/fNjFF/11/

$('#target').tooltip({项目:'a.target'，content: '加载中...',show: null,//立即显示打开:函数(事件，用户界面){if (typeof(event.originalEvent) === '未定义'){返回假；}var $id = $(ui.tooltip).attr('id');//关闭任何挥之不去的工具提示$('div.ui-tooltip').not('#' + $id).remove();//ajax 函数拉入数据并将其添加到工具提示到这里},关闭:函数(事件，用户界面){ui.tooltip.hover(function(){$(this).stop(true).fadeTo(400, 1);},功能(){$(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><身体><div id="目标"><a href="#" class="target">悬停在我身上！</a><a href="#" class="target">也悬停在我身上！</a>

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

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.

解决方案

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.

这篇关于如果鼠标不在目标或工具提示上，则仅关闭工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如果鼠标不在目标或工具提示上，则仅关闭工具提示 [英] Only close tooltip if mouse is not over target or tooltip

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如果鼠标不在目标或工具提示上，则仅关闭工具提示 [英] Only close tooltip if mouse is not over target or tooltip

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭