Подсказка Bootstrap не исчезает после нажатия кнопки & mouseleave

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

12 73
javascript twitter-bootstrap tooltip

12 ответов:

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

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

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

пример doc в скрипке -> http://jsfiddle.net/vdzvvg6o/

144

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

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

это также показывает подсказку снова при наведении курсора.

33

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

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

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

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

7

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

$('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-код //Подсказка $('.btn').подсказка({ триггер: "нависать" });

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

2

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

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

это исправить:

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

Я использую Bootstrap tooltip в цикле.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');
}
0

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

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

});

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

0

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

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

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

onclick="this.blur()"
0

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

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

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

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

скрипка

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

0