Как заставить всплывающую подсказку bootstrap исчезнуть через 2 секунды при наведении

Я использую Tooltip() с Twitter-Bootstrap. Когда зависал над элементом, a tooltip показывает вверх. Но он остается там, пока вы не уберете от него мышь.

как я могу заставить его исчезнуть через несколько секунд он выскочил, вместо того, чтобы ждать, пока мышь не отойдет от элемента?

6
twitter-bootstrap-3 twitter-bootstrap-tooltip

3 ответов

Bootstrap предоставляет методы для управления подсказками, такими как $('#element').tooltip('hide')

Если добавить data-trigger='manual' атрибут к вашим элементам, вы можете контролировать как подсказка показана или спрятана. 

$('.bstooltip').mouseenter(function(){
    var that = $(this)
    that.tooltip('show');
    setTimeout(function(){
        that.tooltip('hide');
    }, 2000);
});

$('.bstooltip').mouseleave(function(){
    $(this).tooltip('hide');
});

Скрипка

14

если несколько mouseEnter и mouseleave событие происходит в течение времени задержки "скрыть" вызывается несколько раз и может быть всплывающая подсказка закрывается раньше, чем ожидалось. Старые звонки должны быть отброшены.

$('.bstooltip').on('shown.bs.tooltip', function () {
    var that = $(this);

    var element = that[0];
    if(element.myShowTooltipEventNum == null){
        element.myShowTooltipEventNum = 0;
    }else{
        element.myShowTooltipEventNum++;
    }
    var eventNum = element.myShowTooltipEventNum;

    setTimeout(function(){
        if(element.myShowTooltipEventNum == eventNum){
            that.tooltip('hide');
        }
        // else skip timeout event
    }, 2000);
});

Скрипка

1

вот простой ответ

$(selector).tooltip({title:"somthing~", trigger:"hover", delay:{hide:800}, placement:"top"});

только дайте скрыть параметр в опции задержки.

он отлично работает, также событие фокуса не нажимает событие (я не знаю, почему..)

0