Всплывающая подсказка Bootstrap не исчезает после нажатия кнопки и mouseleave

Ответ 1

Это потому, что trigger не установлен. Значением по умолчанию для триггера является 'hover focus', поэтому подсказка остается видимой после нажатия кнопки, пока не будет нажата другая кнопка, потому что кнопка находится в focused.

Поэтому все, что вам нужно сделать, это определить trigger как 'hover'. Ниже приведен пример, на который вы ссылались без сохранения всплывающих подсказок после нажатия кнопки:

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})  

пример документа в скрипке → http://jsfiddle.net/vdzvvg6o/

Ответ 2

Я знаю более года, но я не мог заставить это работать с любыми примерами здесь. Мне пришлось использовать следующее:

$('[rel="tooltip"]').on('click', function () {
    $(this).tooltip('hide')
})

Это также показывает всплывающую подсказку снова при наведении указателя мыши.

Ответ 3

В моем случае проблема была воспроизведена только в Internet Explorer: независимо от того, какой элемент (вход, div и т.д.) имеет всплывающую подсказку - если щелкнуть - всплывающая подсказка остается отображаемой.

нашел некоторые решения в Интернете, которые рекомендуют .hide(), что всплывающая подсказка по элементам Click event - но это плохая идея - зависание назад к одному и тому же элементу - держит его скрытым... в моем случае

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

сделал все волшебство!!! - где .myToolTippedElement - это элемент, который имеет всплывающую подсказку ofCourse...

Ответ 4

Привет, у меня мало решений для этой проблемы. Когда другие решения не работают, просто попробуйте следующее:

$('body').tooltip({
        selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
        trigger: 'hover',
        container: 'body'
    }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
        $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
    });

Это решение для перетаскивания. Поэтому я надеюсь, что это поможет кому-то:)

Ответ 5

Попробуйте использовать rel="tooltip" вместо data-toggle="tooltip", который работал в моем случае. Я использовал data-toggle="tooltip", а также задал условие триггера как зависание, которое не срабатывало в моем случае. Когда я изменил свой селектор данных, он сработал.

Код HTML:

<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>

Код JS // подсказка $ ( 'БТН'). Подсказка ({ trigger: "hover" });

Это обязательно удалит застрявшую подсказку.

Ответ 6

Ответ Дэвида выше помог исправить мою проблему. Я нажал кнопку мыши и нажал кнопку. Firefox на MAC действительно вел себя так, как я хотел. То есть, покажите подсказку при наведении курсора, не показывайте подсказку для клика. В других браузерах и ОС, когда я нажимаю, всплывающая подсказка появляется и остается показом. Даже если я перемещаю мышь на другие кнопки для зависания. Это то, что у меня было:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true}); 

Это исправление:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'}); 

Ответ 7

Также вы можете добавить:

onclick="this.blur()"

Ответ 8

Рабочий раствор

$(document).on("click",function()
    {
    setTimeout(function()
    {

  $('[data-toggle="tooltip"]').tooltip('hide');

},500);    // Hides tooltip in 500 milliseconds
    });

Ответ 9

Я решил эту проблему, удалив всплывающую подсказку в функции события click, используя следующий код:

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});

Ответ 10

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

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
      $(this).tooltip('dispose');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
      $(this).tooltip('dispose');
    });
   }

Ответ 11

Я использую всплывающую подсказку boottrap в cycle.js, и ни одна из вышеперечисленных не работает для меня.

Я должен был сделать это:

return button( selector + '.btn.btn-sm', 
             {
               hook: {
                 destroy: tooltipOff,
                 insert:  toggleTooltipOn,
               },
....

function toggleTooltipOn(vnode){
  setupJQuery();  
  jQuery[0].$( vnode.elm )
    .tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}

function tooltipOff( vnode ){
  setupJQuery();      
  jQuery[0].$( vnode.elm ).tooltip('hide');
}

Ответ 12

Это работает для меня:

$(document).ready(function() {
   $('#save').tooltip({
            trigger : 'hover'
        }) ;

});

Я отключил кнопку сохранения динамически, тогда проблема была.

Ответ 13

Внутри вашего документа готовая функция используйте это

 $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip({
               trigger : 'hover'
            });
    });

Ответ 14

Это решение сработало для меня.

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
  trigger: 'click'
});

$('a[data-toggle="tooltip"]').click(function(event){
  event.stopPropagation();
});

$('body').click(function(){
  $('a[data-toggle="tooltip"]').tooltip('hide');
});

играть на скрипке

Я перепробовал большинство решений, приведенных в предыдущих ответах, но ни одно из них не помогло мне.

Ответ 15

Моя проблема в DataTable. Ниже код работает для меня.

columnDefs: [ { targets: 0, data: "id", render: function (data, type, full, meta) { return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>'; } } ], drawCallback: function() { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').on('click', function() { $(this).tooltip('hide'); }); }

Ответ 16

Вы также можете использовать метод ниже, чтобы скрыть всплывающую подсказку, как показано ниже:

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});

Ответ 17

В моем случае для этого было исправлено:

beforeDestroyingElement() {    
  $('[data-toggle="tooltip"]').tooltip('hide');
}

Я не подчинялся этому правилу из документации Bootstrap:

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