带有链接的 jquery UI 工具提示 html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18231315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery UI tooltip html with links
提问by Nir
I want to use jquery UI tooltip.
我想使用 jquery UI 工具提示。
In the tooltip i want that there will be a link in html.
在工具提示中，我希望在 html 中有一个链接。
I saw this post (Jquery UI tooltip does not support html content) that says how to work with html inside the tooltip.
我看到了这篇文章（Jquery UI 工具提示不支持 html 内容），其中说明了如何在工具提示中使用 html。
But there is a problem when I want to add link inside the tooltip.
但是当我想在工具提示中添加链接时出现问题。
When I came with the cursor to enter the tooltip for clicking the link, the tooltip disappeared (because I mouseout from the element the assigned to the tooltip.
当我带着光标进入用于单击链接的工具提示时，工具提示消失了（因为我从分配给工具提示的元素中移出鼠标。
What can I do?
我能做什么？
Thanks.
谢谢。
UPDATE:
更新：
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
Example: http://jsfiddle.net/jLkcs/
回答by Irvin Dominin
Because of the nature of the jQuery UI tooltip is not possible out of the box.
由于 jQuery UI 工具提示的性质，无法开箱即用。
You can add some trick (found on jQuery forum, but link lost...) to let the tooltip delay its closing and let you have the time to click the links.
您可以添加一些技巧（在 jQuery 论坛上找到，但链接丢失了...）让工具提示延迟关闭并让您有时间单击链接。
Used api docs: http://api.jqueryui.com/tooltip/
使用的 api 文档：http: //api.jqueryui.com/tooltip/
Code:
代码：
$(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();
})
});
}
});
});
回答by ScottGuymer
Looks like your going to have to get your hands dirty and edit the jQuery code so that on the mousout event it doesn't close if you are hovering over the tooltip itself.
看起来您将不得不亲自动手并编辑 jQuery 代码，以便在 mousout 事件中，如果您将鼠标悬停在工具提示本身上，它就不会关闭。
Or as an alternative you could look at the twitter bootstrap tooltip and popover, i think from memory you can pass an event trigger type to the popover.
或者作为替代，您可以查看 twitter bootstrap tooltip 和 popover，我认为从内存中您可以将事件触发器类型传递给 popover。
回答by Simon Russell
Irvin Dominin's accepted answer was a huge help for me on this. I've expanded on it if anybody has the same additional requirement that I had.
Irvin Dominin 接受的答案对我来说是一个巨大的帮助。如果有人有与我相同的额外要求，我已经对其进行了扩展。
I also wanted to put a delay on the tooltip display. Because the "show" option was set to null, I needed to replicate it. (the show option is set to null to stop the popup visibly redrawing when the mouse moves from the tooltip back to the calling link).
我还想延迟工具提示显示。因为“show”选项设置为空，我需要复制它。（将 show 选项设置为 null 以在鼠标从工具提示移回调用链接时停止明显重绘弹出窗口）。
I needed to put a delay, since a page I was developing had lots of user tooltips, and instant display was a bit jarring when mousing across the page.
我需要延迟，因为我正在开发的页面有很多用户工具提示，当鼠标在页面上移动时，即时显示有点刺耳。
My solution was to use the open event to hide the tooltip and add a timeout before displaying it again. The exception to this was if the same tooltip was already open, and to sort this I added a true/false data attribute to each element when opening/closing it (getting the source element from the open and close functions wasn't easy, but I think it's right).
我的解决方案是使用 open 事件隐藏工具提示并在再次显示之前添加超时。例外情况是，如果相同的工具提示已经打开，并且为了对此进行排序，我在打开/关闭它时向每个元素添加了一个 true/false 数据属性（从打开和关闭函数中获取源元素并不容易，但是我觉得是对的）。
Disclaimer: I'm no master at JQuery, and there may well be a much easier way to replicate this. I get stuck down rabbit-holes with code sometimes, so the code below might be bad advice...
免责声明：我不是 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();
});
});
}
});
Note that I also added some classes and positioning to my popups to put an arrow to the calling link. Plus my content was derived from a user object file loaded on the page. I've removed these to hopefully make it easier to use.
请注意，我还在弹出窗口中添加了一些类和定位，以将箭头指向调用链接。另外，我的内容来自加载在页面上的用户对象文件。我已经删除了这些，希望它更容易使用。
