31

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

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

4

4 回答 4

47

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

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

于 2013-05-21T06:38:48.417 回答
5

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

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

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

于 2013-07-02T23:17:57.100 回答
1

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

你可以用那个最小的插件来做到这一点：

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

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

于 2013-05-21T01:12:29.753 回答
1

我有一个类似的目标，即让带有 HTML 链接的引导工具提示保持打开状态，直到单击其他地方或打开另一个工具提示（以便用户可以单击工具提示中的链接）。

这是我基于以前的一些帖子的解决方案：

/**
  * 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’&gt;tip</a>."> Linked ToolTip </span>

JSFiddle

于 2017-08-26T18:09:56.037 回答