Podpowiedź Bootstrapa nie znika po kliknięciu przycisku i kliknięciu myszką

Wiem, że ma ponad rok, ale nie mogłem tego zrobić z żadnymi przykładami tutaj. Musiałem użyć:

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

To również pokazuje podpowiedź ponownie po najechaniu kursorem.

W moim przypadku problem został odtworzony tylko w Internet Explorerze: bez względu na to, który element (input, div itp...) ma tooltip-po kliknięciu-tooltip pozostaje wyświetlony.

Znalazłem kilka rozwiązań w sieci, które polecają .hide() ta podpowiedź na elementach Click event - ale to zły pomysł - cofnięcie kursora myszy do tego samego elementu-utrzymuje go w ukryciu... w moim przypadku

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

Stworzył całą magię!!!- gdzie .myToolTippedElement to element, który ma etykietę kursu...

Witam mam małe rozwiązanie tego problemu. Gdy inne rozwiązania nie działają po prostu spróbuj tego:

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

Jest to również rozwiązanie do przeciągania i upuszczania. Więc mam nadzieję, że to komuś pomoże:)

W angular 7 z bootstrap 4 i jquery znalazłem to i działa dobrze. Użyłem dispose, ponieważ niszczy nie ukrywa podpowiedzi.

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

Możesz też dodać:

onclick="this.blur()"

Rozwiązanie Robocze

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

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

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

Spróbuj użyć rel="tooltip" zamiast data-toggle="tooltip", co zadziałało w moim przypadku. Używałem data-toggle="tooltip", a także ustawiłem stan wyzwalacza jako hover, który nie działał w moim przypadku. Kiedy zmieniłem selektor danych, zadziałało.

Kod HTML:

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

Kod JS // Tooltip $('.btn").tooltip({ trigger: "hover" });

To z pewnością usunie przyklejoną podpowiedź.

Powyższa odpowiedź Davida pomogła rozwiązać mój problem. Miałem zarówno hover i kliknij wydarzenie na przycisk. Firefox na Macu zachowywał się tak, jak chciałem. Oznacza to, że Pokaż podpowiedź po najechaniu kursorem, Nie pokazuj podpowiedzi dla kliknięcia. W innych przeglądarkach i systemie operacyjnym po kliknięciu pojawi się podpowiedź i pozostanie jako Pokaż. Nawet jeśli przesunę mysz do innych przycisków na kursor. To mialem:

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

To jest fix:

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

Sposób, w jaki naprawiłem ten problem, polegał na usunięciu podpowiedzi w funkcji zdarzenia kliknięcia za pomocą następującego kodu:

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

Jest to również możliwe do osiągnięcia w HTML dodając:

 data-trigger="hover"

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

Możesz również użyć poniższej metody, aby ukryć podpowiedź na mouseleave , Jak poniżej:

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

Miałem ten problem z Bootstrap 4 na iPhone z Safari.

Na PC/pulpicie, podpowiedź działa świetnie. Ale gdy patrzysz na iPhone ' a z iOS 14, Po kliknięciu / dotknięciu przycisku Etykieta pozostanie widoczna. Również podczas ukrywania warstwy.

Dla mnie dodanie tego kodu rozwiązało problem na iPhonie:

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

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

Używam podpowiedzi bootstrap w cyklu.js i żaden z powyższych nie działał dla mnie.

Musiałem to zrobić:

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

To działa dla mnie:

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

});

Wyłączałem dynamicznie przycisk Zapisz, potem był problem.

Wewnątrz funkcji gotowego dokumentu użyj tego

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

To rozwiązanie zadziałało dla mnie.

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

Fiddle

Mój problem jest w DataTable. Poniższy kod działa dla mnie.

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

W moim przypadku było to rozwiązanie:

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

Nie przestrzegałem tej zasady z Bootstrap docs:

Podpowiedzi muszą być ukryte, zanim ich odpowiednie elementy zostaną usunięte z drzewa DOM.

Możesz również użyć tego sposobu w przypadku starych wersji, ponieważ zaakceptowana odpowiedź nie zadziałała dla mnie i napisałem ten kod dla siebie i jego działania dobrze.

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

Jeśli ktoś chce skonfigurować podpowiedź, która będzie wyświetlana przez jakiś czas po kliknięciu, oto jak to zrobiłem:

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

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

Użycie forced blur() ma potencjał, aby zmniejszyć doświadczenie użytkownika. Nie zrobiłbym tego. Odkryłem, że usunięcie "data-original-title", a także usunięcie atrybutów "data-toggle" i "title" działało dla mnie.

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

Używanie delegatury, aby była przyjazna ajaxowi,

// if you're not using turbolinks, then you can remove this parent wrapper
$(document).on('turbolinks:load'), function() {  
  // enable tooltip with delegation to allow ajax pages to keep tooltip enabled
  $('body').tooltip({
    select: "[data-toggle='tooltip']"
  });

  // remove old tooltip from sticking on the page when calling ajax with turbolinks
  $('body').on('click', "[data-toggle='tooltip']", function() {
    $(this).tooltip('dispose');
  });
});