带有链接的 jQuery UI 工具提示 HTML 内容

Question

我想使用 jQuery UI 工具提示。在工具提示中，我希望有一个 HTML 格式的链接。

我看到这个问题说如何在工具提示内使用HTML，但是当我想在工具提示内添加链接时出现问题。

当我使用光标输入单击链接的工具提示时，工具提示消失（因为我从分配给工具提示的元素中

mouseout

）。

我能做什么？

$(function () {
    $(document).tooltip({
        content: function () {
            return $(this).prop('title');
        }
    });
});

示例：jsFiddle

Answer 1

由于 jQuery UI 工具提示的性质，不可能开箱即用。

您可以添加一些技巧（在 jQuery 论坛上找到，但链接丢失了...）来让工具提示延迟关闭，让您有时间单击链接。

使用的 API 文档：http://api.jqueryui.com/tooltip/

代码：

$(function () {
    $(document).tooltip({
        content: function () {
            return $(this).prop('title');
        },
        show: null, 
        close: function (event, ui) {
            ui.tooltip.hover(
            function () {
                $(this).stop(true).fadeTo(400, 1);
            },    
            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                })
            });
        }
    });
});

演示：http://jsfiddle.net/IrvinDominin/jLkcs/5/

Answer 2

看起来你必须亲自动手编辑 jQuery 代码，这样在鼠标悬停事件上，如果你将鼠标悬停在工具提示本身上，它就不会关闭。

或者作为替代方案，您可以查看 twitter 引导工具提示和弹出窗口，我认为根据记忆您可以将事件触发器类型传递给弹出窗口。

http://getbootstrap.com/2.3.2/javascript.html#popovers

Answer 3

Irvin Dominin 接受的答案对我来说是一个巨大的帮助。如果有人有与我相同的额外要求，我会对此进行扩展。

我还想延迟工具提示的显示。因为“show”选项设置为空，所以我需要复制它。 （show 选项设置为 null，以在鼠标从工具提示移回调用链接时停止弹出窗口明显重绘）。

我需要延迟，因为我正在开发的页面有很多用户工具提示，当鼠标滑过页面时，即时显示有点刺耳。

我的解决方案是使用打开事件隐藏工具提示并在再次显示之前添加超时。例外情况是，如果同一个工具提示已打开，为了对此进行排序，我在打开/关闭每个元素时向每个元素添加了 true/false 数据属性（从打开和关闭函数获取源元素并不容易，但是我觉得是对的）。

免责声明：我不是 JQuery 大师，很可能有一种更简单的方法来复制它。有时我会陷入代码的困境，所以下面的代码可能是不好的建议......

var ttWait; // global variable for tooltip delay
$(document).tooltip({
    items: '.userSummaryLink',
    show: null,
    content: function() {  // build the popup content
        return $(this).prop('title');
    },
    open: function (event, ui) { // simulating the show option (that needs to be null to stop the popup closing and reopening when user mouses from popup back to source
        var el = $(event.originalEvent.target);
        if( !el.data('tooltip') ) { // only put open delay if SAME popup not already open
            ui.tooltip.hide(); // stop popup opening immediately
            ttWait = setTimeout(function() { // show popup after delay
                el.data("tooltip", true); // acknowledge popup open
                ui.tooltip.fadeIn("400");
            }, 250);
        }
    },
    close: function (event, ui) {
        var el =  $(event.originalEvent.target);
        el.data("tooltip", false); // acknowledge popup closed (might be over-ridden below)
        clearTimeout(ttWait); // stop tooltip delay function
        ui.tooltip.hover(
            function () {
                $(this).stop(true).fadeTo(400, 1);
                el.data("tooltip", true); // acknowledge popup still open
            },

            function () {
                $(this).fadeOut("400", function () {
                    $(this).remove();
                });
            });
    }
});

请注意，我还在弹出窗口中添加了一些类和定位，以将箭头放在调用链接上。另外，我的内容是从页面上加载的用户对象文件派生的。我已经删除了它们，希望它更容易使用。