我GOOGLE了大約2天，並不知道如何設置http://api.jqueryui.com/tooltip/超時???Jquery UI工具提示。設置超時時間並設置懸停事件。凍結鼠標懸停工具提示
也許我應該使用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) {}
});
試過這種？
$(".selector").tooltip({ show: { duration: 800 } });
我也找了一個類似的解決方案，顯示出正常的提示，但是當它應該留在鼠標懸停提示（工具提示的內容是一些按鈕）。
我不想整個框架（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(); })
}
);
}
});
這幫了我，雖然我不得不刪除'打開：'部分，否則一切都飛來飛去 –
是的，這是可選的。 – Hontoni
這是一個救星 - 好吧，好吧，不相當「生活」的節省，但我搜索了很多，這是我發現的唯一選擇。 –
我有一個很好的解決方案，通過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');
});
[更新：阿米特Added a gist與修復上述溶液]
這個解決方案比@Antonimo的解決方案更好，因爲你實際上在工具提示中實現了一個合適的'close'方法。 – RobAu
此版本確保工具提示保持足夠可見狀態，以便用戶將鼠標移至工具提示並保持可見狀態，直至鼠標移出。方便讓用戶從工具提示中選擇一些文本。部分代碼來自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 } });
我喜歡這個設置超時：
$(document).tooltip({
open: function(event, ui) {
ui.tooltip.delay(5000).fadeTo(2000, 0);
}
});
這對我有效！非常感謝 – Hevski
<!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>
是嘗試，如果持續時間是沒有效果的名稱，它使用默認的「淡入」的效果，所以它只是對淡入 – mindsupport
@mindsupport時間：這是settimeout，你確切的要求是什麼？ – naveen
我只需要顯示當鼠標懸停在工具提示上的工具提示） – mindsupport