Підказка Bootstrap не зникає після натискання кнопки та миші

У мене проблема з підказкою завантажувача: Коли я натискаю кнопку, підказка залишається, навіть якщо курсор знаходиться поза кнопкою. Я переглянув посібник - підказку Bootstrap, і якщо натискаю на кнопки, я бачу ту саму проблему. Чи можна вирішити це? Щойно спробував в останній FF, IE.

Це тому trigger, що не встановлено. Значенням за замовчуванням для тригера є 'hover focus', таким чином, підказка залишається видимою після натискання кнопки, доки не буде натиснута інша кнопка, оскільки кнопка є focused.

Тому все, що вам потрібно зробити, це визначити лише triggerяк 'hover'. Нижче наведено той самий приклад, до якого ви пов’язали без збереження підказок після натискання кнопки:

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

приклад doc у скрипці -> 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: незалежно від того, який елемент (введення, діла тощо ...) має підказку, якщо натиснути- залишиться показана підказка.

знайшов рішення в Інтернеті, яке рекомендує .hide (), що підказка на елементах Клацніть подія, але це погана ідея - повернення до того ж елемента - зберігає його приховано ... в моєму випадку

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

зробив усі чари !!! - де .myToolTippedElement є елементом, який має підказку курсу ...

у куті 7 із завантажувальним кодом 4 та jquery я знайшов це, і він працює чудово. Я використовував утилізацію, оскільки вона руйнує, не приховує підказки.

  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 // Tooltip $ ('. Btn'). Tooltip ({тригер: 'навести'});

Це однозначно видалить застряглі підказки.

Відповідь Девіда вище допомогла виправити мою проблему. У мене були кнопки наведення курсору та натискання на кнопку. 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();
});

Я використовую bootstrap tooltip у 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");