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

У меня проблема с всплывающей подсказкой начальной загрузки: когда я нажимаю кнопку, всплывающая подсказка остается, даже если курсор находится за пределами кнопки. Я просмотрел руководство - всплывающую подсказку Bootstrap, и если я нажимаю на кнопки, я вижу ту же проблему. Есть какое-нибудь решение, чтобы это исправить? Только что попробовал в последней версии FF, IE.

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

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

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

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

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

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

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

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

$('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');
    });

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

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

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

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

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

в angular 7 с bootstrap 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');
    });
   }

Попробуйте использовать 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 // Подсказка $ ('. Btn'). Tooltip ({trigger: 'hover'});

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

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

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

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

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

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

onclick="this.blur()"

Рабочее решение

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

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

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

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

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

Я использую всплывающую подсказку при загрузке в 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');
}

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

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

});

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

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

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

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

$('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');
});

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

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

Моя проблема в 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'); }); }

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

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

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

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

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

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

Это также возможно в HTML, добавив следующее:

 data-trigger="hover"

 <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>

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

$(document).on('mousedown', "[aria-describedby]", function() {
    $("[aria-describedby]").tooltip('hide');
});

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

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

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})

Использование принудительного размытия () может снизить удобство работы пользователя. Я бы не стал этого делать. Я обнаружил, что удаление «data-original-title», а также атрибутов «data-toggle» и «title» сработало для меня.

    $(id).tooltip('hide');
    $(id).removeAttr("data-toggle");
    $(id).removeAttr("data-original-title");
    $(id).removeAttr("title");