Мне нужен эффект, когда кто-то наводит курсор на элемент, он видит подсказку на несколько секунд, после чего подсказка исчезает, даже если мышь все еще находится на элементе. Вот что у меня есть:
<div data-sentence-tooltip="yes" data-tooltip-content: "some content"> some text </div>
$('[data-sentence-tooltip="yes"]').tooltip({title: function(){return $(this).attr('data-tooltip-content')}});
Я попробовал следующие два, основываясь на других связанных с этим вопросах:
setTimeout(function(){$(".tooltip").fadeOut("fast");}, 2000);
А также
jQuery.fn.delay = function(time,func){
return this.each(function(){
setTimeout(func,time);
});
};
$('[id^="tooltip"]').delay(2000, function(){
$('[id^="tooltip"]').fadeOut('fast');
}
);
Но я думаю, я знаю, почему ничего из этого не работает. Возможно, потому что .tooltip
или id=tooltip*
добавляются в DOM на лету.
Ref :
- JQuery всплывающая подсказка, скрыть через .. время
- JQuery всплывающей подсказки установить время ожидания
3 ответа
Добавьте функцию вроде так
$('[data-sentence-tooltip="yes"]').on('mouseover', function(){
// if the tooltip is a child of the element that is being hovered on
// then write this.
setTimeout(function(){
$(this).find('.tooltip').fadeOut();
}, 2000);
// if the tooltip is a sibling of the element being hovered on
// write this
setTimeout(function(){
$(this).parent().find('.tooltip').fadeOut();
}, 2000);
});
Это гарантирует, что ваш код будет искать .tooltip только после того, как вы наведете курсор на элемент, который его отображает.
Принимая во внимание ответ Зохейри, вот что я наконец-то сделал:
$('[data-sentence-tooltip="yes"]').on('mouseover', function(){
setTimeout(function(){
$('#enclosingParentDiv').find('.tooltip').fadeOut('fast');
}, 1000);
});
Несколько замечаний:
- Я применил указатель мыши к каждому элементу div, потому что пользователь наводит указатель мыши на содержимое в элементе div
- Я ищу .tooltip в
parent div
, потому чтоtooltip
добавляется как брат.
Я понял это, посмотрев на элемент, который проверяется в Chrome. Не уверен, что это полностью надежно и будет работать с другими браузерами
$('input').on('mouseover', function() {
if(!$(this).is(":focus"))
$("#" + $(this).attr("aria-describedby")).delay(800).fadeOut(800);
});
Предложение if является необязательным, что делает этот код эффективным только тогда, когда фокус находится не над текстовым полем. в противном случае всплывающая подсказка продолжает отображаться
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.