我想使用 jquery UI 工具提示。
在工具提示中，我希望在 html 中有一个链接。
我看到这篇文章 (Jquery UI tooltip does not support html content) 说明了如何在工具提示中使用 html。
但是当我想在工具提示中添加链接时出现问题。
当我用光标输入工具提示以单击链接时，工具提示消失了（因为我从分配给工具提示的元素上移出鼠标。
我能做什么？
谢谢。
更新：
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
【问题讨论】：
由于 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();
})
});
}
});
});
【讨论】：
看起来您将不得不亲自动手并编辑 jQuery 代码，以便在 mousout 事件中，如果您将鼠标悬停在工具提示本身上，它不会关闭。
或者作为替代方案，您可以查看 twitter 引导工具提示和弹出框，我认为您可以根据记忆将事件触发类型传递给弹出框。
Irvin Dominin 接受的答案在这方面对我有很大帮助。如果有人有与我相同的额外要求，我已经对其进行了扩展。
我还想延迟显示工具提示。因为“显示”选项设置为空，所以我需要复制它。 （show 选项设置为 null 以在鼠标从工具提示移回调用链接时停止弹出可见重绘）。
我需要延迟，因为我正在开发的页面有很多用户工具提示，当鼠标在页面上移动时即时显示有点不和谐。
我的解决方案是使用 open 事件隐藏工具提示并在再次显示之前添加超时。例外情况是如果相同的工具提示已经打开，并且为了对此进行排序，我在打开/关闭它时为每个元素添加了一个真/假数据属性（从 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();
});
});
}
});
请注意，我还在弹出窗口中添加了一些类和定位，以便在调用链接上放置一个箭头。另外，我的内容来自页面上加载的用户对象文件。我已经删除了这些，希望它更易于使用。
【讨论】：