I've googled about 2 days and can't figure out how to set timeout for http://api.jqueryui.com/tooltip/ ???
Maybe i should use jquery hoverIntent ?
here is my code
$('*[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(); })
}
);
}
});
jQueryフォーラムのスレッドに触発された良い解決策があります：
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');
});
[更新: アミットは、上記のソリューションの要旨を修正と共に追加しました。]
タイムアウトを設定するためにこれが好きです：
$(document).tooltip({
open: function(event, ui) {
ui.tooltip.delay(5000).fadeTo(2000, 0);
}
});
これを試しましたか？
$( ".selector" ).tooltip({ show: { 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>
@naveen からの応答の変形。これには期間がありますが、jQuery UI のイージングでは、期間の半分 (この場合は 800 ミリ秒) を過ぎるまでまったく表示されません。ユーザーがマウスをホバーしたままにしない場合、ツールチップが使用できないため、これはホバー インテントのように機能します。問題を解決するシンプルでエレガントな方法。
$( ".selector" ).tooltip({ show: { easing: "easeInExpo", 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>