Question

使用jQuery UI工具提示，如果我超过目标，或者如果我已经超过工具提示本身，我想保持工具提示处于打开状态。

我想我可以使用close回调查看我是否在工具提示或目标区域，但我必须再分配另一个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>

我现在正在努力了解我能想出什么。

Answer 1

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

当附近存在大量工具提示链接时，我也遇到了延迟工具提示的问题，因此工具提示最终会堆叠或根本不关闭，因此在打开工具提示时会关闭所有其他打开的工具提示。

Answer 2

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

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

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

Answer 3

它不是内置的，因为他们jQuery UI团队并不认为它会增加价值。您可以阅读功能请求here。有一些指向this one（demo）等项目的链接可以添加您正在寻找的效果。

您可以使用该最小插件执行此操作：

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

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

Answer 4

我有一个类似的目标，即使用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’>tip</a>."> Linked ToolTip </span>

JSFiddle

如果鼠标未超过目标或工具提示，则仅关闭工具提示

4 个答案: