Мне нужен эффект, когда кто-то наводит курсор на элемент, он видит подсказку на несколько секунд, после чего подсказка исчезает, даже если мышь все еще находится на элементе. Вот что у меня есть:

<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 :

  1. JQuery всплывающая подсказка, скрыть через .. время
  2. JQuery всплывающей подсказки установить время ожидания
2
The Wanderer 15 Дек 2015 в 19:36

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 только после того, как вы наведете курсор на элемент, который его отображает.

2
Alizoh 15 Дек 2015 в 23:01

Принимая во внимание ответ Зохейри, вот что я наконец-то сделал:

$('[data-sentence-tooltip="yes"]').on('mouseover', function(){
    setTimeout(function(){
    $('#enclosingParentDiv').find('.tooltip').fadeOut('fast');
  }, 1000);
}); 

Несколько замечаний:

  1. Я применил указатель мыши к каждому элементу div, потому что пользователь наводит указатель мыши на содержимое в элементе div
  2. Я ищу .tooltip в parent div, потому что tooltip добавляется как брат.
3
The Wanderer 15 Дек 2015 в 19:19

Я понял это, посмотрев на элемент, который проверяется в Chrome. Не уверен, что это полностью надежно и будет работать с другими браузерами

$('input').on('mouseover', function() {
    if(!$(this).is(":focus"))
        $("#" + $(this).attr("aria-describedby")).delay(800).fadeOut(800);
});

Предложение if является необязательным, что делает этот код эффективным только тогда, когда фокус находится не над текстовым полем. в противном случае всплывающая подсказка продолжает отображаться

0
Alwaysa Beginner 16 Ноя 2019 в 18:22