У меня googled около 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(); })
}
);
}
});
У меня есть хорошее решение, вдохновленное секция 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');
});
[Обновить: Amit Добавил gist для вышеупомянутого решения с исправлениями.]
Мне нравится это для установки таймаута:
$(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>
Пример: http://jsfiddle.net/A44EB/123/
Вариант ответа от @naveen. Это длительность, но с jQuery UI easing не отображается вообще до последней половины продолжительности (400 мс в этом случае 800 мс). Если пользователь не удерживает курсор мыши, это действует как наведение курсора, поскольку всплывающая подсказка никогда не будет доступна. Простой, элегантный способ решить проблему.
$( ".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="#" onclick="location.href='http://www.google.com'; return false;"> 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>