带链接的jquery UI工具提示html

我想使用jquery UI工具提示

在工具提示中，我希望在html中有一个链接

我在工具提示中看到了这篇关于如何使用html的帖子（）

但是，当我想在工具提示中添加链接时，出现了一个问题

当我用光标输入用于单击链接的工具提示时，工具提示消失了（因为我将鼠标从指定给工具提示的元素中移出）

我能做什么

谢谢

更新：

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

---

示例：

看起来您必须把手弄脏并编辑jQuery代码，以便在mousout事件中，如果您将鼠标悬停在工具提示上，它不会关闭

或者，您可以查看twitter引导工具提示和popover，我认为从内存中可以将事件触发器类型传递给popover

---

由于jQuery UI工具提示的性质，无法开箱即用

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

使用的api文档：

代码：

---

演示：

Irvin Dominin接受的答案在这方面对我帮助很大。如果有人有与我相同的额外要求，我会对此进行扩展

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

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

我的解决方案是使用“打开”事件隐藏工具提示，并在再次显示之前添加超时。例外情况是，如果相同的工具提示已打开，并且为了对其进行排序，我在打开/关闭它时为每个元素添加了真/假数据属性（从open和close函数中获取源元素并不容易，但我认为这是正确的）

免责声明：我不是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();
                });
            });
    }
});

---

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

你能在JSFIDLE上提供该问题的演示吗？我更新了问题并在JSFIDLE中添加了示例。你能给我一些建议吗请给我一个例子来说明如何做到这一点？谢谢“编辑jQuery代码”是什么意思？您是指实际的jQuery脚本吗？为什么不简单地引用并更改…您是正确的，您确实可以使用或回调来指定其他行为。您需要将事件绑定到实际工具提示本身的鼠标上方，以防止发生其他事件（即关闭事件）谢谢！太完美了！先生，您为我节省了30分钟。

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();
                });
            });
    }
});