Спрятать подсказку через некоторое время

Question

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

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

javascript jquery html css

2

The Wanderer 15 Дек 2015 в 19:36

Answer 1

Добавьте функцию вроде так

$('[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

Answer 2

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

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

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

Я применил указатель мыши к каждому элементу div, потому что пользователь наводит указатель мыши на содержимое в элементе div
Я ищу .tooltip в parent div, потому что tooltip добавляется как брат.

3

The Wanderer 15 Дек 2015 в 19:19

Answer 3

Я понял это, посмотрев на элемент, который проверяется в 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

Спрятать подсказку через некоторое время

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript