我在 Google 上搜索了大约 2 天，但不知道如何为 http://api.jqueryui.com/tooltip/ 设置超时？？？
也许我应该使用 jquery hoverIntent ？
这是我的代码
$('*[class*="help_"]').tooltip({
open: function(e,o){
$(o.tooltip).mouseover(function(e){
$('*[class*="help_"]').tooltip('open');
});
$(o.tooltip).mouseout(function(e){
});
},
close: function(e,o) {}
});
【问题讨论】：
我也寻找了类似的解决方案，正常显示工具提示，但是当鼠标悬停在工具提示上时它应该保留（工具提示的内容是一些按钮）。
我不希望整个框架（qtip）这样做，我已经在我的网站上使用 jqUI。
所以我这样做了：
$( document ).tooltip({
show: null, // show immediately
items: '.btn-box-share',
hide: {
effect: "", // fadeOut
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
},
close: function( event, ui ) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
//.fadeIn("slow"); // doesn't work because of stop()
},
function () {
$(this).fadeOut("400", function(){ $(this).remove(); })
}
);
}
});
【讨论】：
open: 部分，否则一切都会飞来飞去
open: function( event, ui ) { ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" ); },部分
我有一个很好的解决方案，灵感来自a jQuery forum thread：
var mouseLeaveTimer;
$('.selector').tooltip(
open: function(){
// make sure all other tooltips are closed when opening a new one
$('.selector').not(this).tooltip('close');
}
}).on('mouseleave', function(e){
var that = this;
// close the tooltip later (maybe ...)
mouseLeaveTimer = setTimeout(function(){
$(that).tooltip('close');
}, 100);
// prevent tooltip widget to close the tooltip now
e.stopImmediatePropagation();
});
$(document).on('mouseenter', '.ui-tooltip', function(e){
// cancel tooltip closing on hover
clearTimeout(mouseLeaveTimer);
});
$(document).on('mouseleave', '.ui-tooltip', function(){
// make sure tooltip is closed when the mouse is gone
$('.selector').tooltip('close');
});
[更新：Amit Added a gist 获取上述解决方案并进行了修复。]
【讨论】：
close 方法。
我喜欢这样设置超时：
$(document).tooltip({
open: function(event, ui) {
ui.tooltip.delay(5000).fadeTo(2000, 0);
}
});
【讨论】：
试过了吗？
$( ".selector" ).tooltip({ show: { duration: 800 } });
【讨论】：
此版本确保工具提示保持可见的时间足够长，以便用户将鼠标移到工具提示上并保持可见直到鼠标移出。方便用户从工具提示中选择一些文本。部分代码来自Antonimo。
$(document).on("click", ".tooltip", function() {
$(this).tooltip(
{
items: ".tooltip",
content: function(){
return $(this).data('description');
},
close: function( event, ui ) {
var me = this;
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function(){
$(this).remove();
});
}
);
ui.tooltip.on("remove", function(){
$(me).tooltip("destroy");
});
},
}
);
$(this).tooltip("open");
});
HTML
<a href="#" class="tooltip" data-description="That's what this widget is">Test</a>
【讨论】：
@naveen 回复的变体。这有一个持续时间，但 jQuery UI easing 直到持续时间的一半（在这种情况下为 800 毫秒为 400 毫秒）才显示。如果用户不保持鼠标悬停，则此功能类似于悬停意图，因为工具提示将永远不可用。解决问题的简单、优雅的方法。
$( ".selector" ).tooltip({ show: { easing: "easeInExpo", duration: 800 } });
【讨论】：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title> dynamic jquery ui tooltip </title>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
#listing {
margin-left: 50px ;
}
.ui-tooltip {
background: #AAABBB ;
-webkit-box-shadow: 0 0 10px #aaa;
box-shadow: 0 0 10px #aaa;
}
body .ui-tooltip {
border-width: 4px;
}
</style>
</head>
<body>
<div id="listing">
<div class="item-heading" id="item-1" > link-1 </div>
</br>
</br>
<div class="item-heading" id="item-2"> link-2</div>
</div>
<script>
// courtesy of: http://stackoverflow.com/a/15014759/65706
// and : http://stackoverflow.com/a/23487435/65706
$(document).tooltip({
items: ".item-heading"
// set static content to the tooltip
// , content: '<p> <a href="http://www.google.com"> go to google </a>'
// or
// set a dynamic content based on the selected element id
, content: function() {
//attribute title would do it as well for non html5
//also any custom attribute name would do it for html5
var el_id= $(this).attr('id');
var id=el_id.split('-')[1];
var d_link = "http://www.somesite.com/page.php?id=" + id ;
d_link = "<p><a href=\"" + d_link + "\"> go to link " +
id + " </a></p>" ;
return d_link ;
}
, open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top + 4 }, "fast" );
}
, close: function( event, ui ) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
//.fadeIn("slow"); // doesn't work because of stop()
},
function () {
$(this).fadeOut("400", function(){ $(this).remove(); })
}
);
}
});
</script>
</body>
</html>
【讨论】：