仅在鼠标未位于目标或工具提示上方时关闭工具提示

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

问题描述

使用jQuery UI工具提示，如果我在目标上方，或者在工具提示本身上方，我想保持工具提示处于打开状态.

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.

我想我可以使用close回调来查看我是在工具提示还是目标区域上，尽管我必须再分配另一个mouseout函数.

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.

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

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.

推荐答案

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

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.

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