Временное скрытие всплывающей подсказки Bootstrap не работает при быстром движении курсора

https://jsfiddle.net/d2gr1qu5/

В этой скрипте у меня есть код, чтобы скрыть всплывающую подсказку manual Bootstrap на <img>, расположенной внутри <button>, через 2 секунды. Кроме того, я всегда вручную скрываю его на mouseleave.

Это работает в большинстве случаев, но если вы быстро перемещаете курсор мыши внутрь или наружу, иногда вы увидите случаи, когда при входе в область изначально не отображается всплывающая подсказка. Симптомом проблемы является то, что что-то начинает мерцать и тут же исчезает.

$("[rel=tooltip]").tooltip({
    trigger: 'manual',
    placement: 'bottom'
});
$("[rel=tooltip]").on("mouseenter", function () {
    console.log('TOOLTIP: Entered mouseeneter');
    var that = $(this)
    that.tooltip('show');
    setTimeout(function () {
        that.tooltip('hide');
        console.log('TOOLTIP: Completed Hide after 2000');
    }, 2000);
});
$("[rel=tooltip]").on("mouseleave click", function () {
    $(this).tooltip('hide');
});

javascript twitter-bootstrap twitter-bootstrap-tooltip
person gene b.    schedule 02.02.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вероятно, срабатывает тайм-аут. Вы можете отключить тайм-аут, когда вы покидаете всплывающую подсказку. Я сделал быстрое и грязное решение с глобальной переменной timeoutTooltip:

var timeoutTooltip;

$("[rel=tooltip]").tooltip({
    trigger: 'manual',
    placement: 'bottom'
});

$("[rel=tooltip]").on("mouseenter", function () {
    console.log('TOOLTIP: Entered mouseeneter');
    var that = $(this)
    that.tooltip('show');
    timeoutTooltip = window.setTimeout(function () {
        that.tooltip('hide');
        console.log('TOOLTIP: Completed Hide after 2000');
    }, 2000);
});

$("[rel=tooltip]").on("mouseleave click", function () {
    $(this).tooltip('hide');
    window.clearTimeout(timeoutTooltip);
});

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

person KIKO Software    schedule 02.02.2021
comment
Это jsFiddle с вашим решением: jsfiddle.net/zxuchbvs Я все еще получаю редкие моменты отсутствия всплывающей подсказки, когда быстро въезжает/выходит со всех сторон, но гораздо меньше, чем раньше, может 10%, а не 50%. Спасибо, это улучшение - person gene b.; 02.02.2021
comment
@geneb. Я заметил, что на мышь реагирует только текст в кнопке, а не вся кнопка, как можно было бы ожидать. Возможно, вы захотите прикрепить всплывающую подсказку ко всей кнопке. - person KIKO Software; 02.02.2021