Podpowiedź Bootstrap nie znika po kliknięciu przycisku i naciśnięciu przycisku myszy

Mam problem z podpowiedzią bootstrap: kiedy klikam przycisk, podpowiedź pozostaje, nawet jeśli kursor znajduje się poza przyciskiem. Zajrzałem do podręcznika - podpowiedzi Bootstrapa i jeśli klikam przyciski, widzę ten sam problem. Czy jest jakieś rozwiązanie, aby to naprawić? Właśnie próbowałem w najnowszym FF, IE.

Dzieje się tak, ponieważ triggernie jest ustawiony. Domyślną wartością wyzwalacza jest 'hover focus', więc podpowiedź pozostaje widoczna po kliknięciu przycisku, aż do kliknięcia innego przycisku, ponieważ przycisk jest focused.

Więc wszystko, co musisz zrobić, to zdefiniować triggerjako 'hover'jedyny. Poniżej tego samego przykładu, do którego utworzono łącze, bez zachowywania się podpowiedzi po kliknięciu przycisku:

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

przykład dokumentu w skrzypcach -> http://jsfiddle.net/vdzvvg6o/

Wiem, że mam ponad rok, ale nie mogłem zmusić tego do pracy z żadnym przykładem tutaj. Musiałem użyć następujących:

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

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

Cześć, mam małe rozwiązanie tego problemu. Jeśli inne rozwiązania nie działają, po prostu wypróbuj to:

$('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. Mam więc nadzieję, że komuś to pomoże :)

W moim przypadku problem został odtworzony tylko w przeglądarce Internet Explorer: bez względu na to, który element (wejście, div itp.) Ma podpowiedź - po kliknięciu podpowiedź pozostaje wyświetlana.

znalazłem kilka rozwiązań w sieci, które zalecają .hide () to podpowiedź do elementów Kliknij wydarzenie - ale to zły pomysł - najechanie z powrotem na ten sam element - utrzymuje go w ukryciu ... w moim przypadku

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

stworzył całą magię !!! - gdzie .myToolTippedElement to element, który ma etykietkę z Kursu ...

w kątowej 7 z bootstrapem 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');
    });
   }

Spróbuj użyć rel="tooltip"zamiast, data-toggle="tooltip"które zadziałało w moim przypadku. Używałem, data-toggle="tooltip"a także ustawiłem warunek wyzwalania jako najechanie kursorem, 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 zablokowaną podpowiedź.

Powyższa odpowiedź Davida pomogła rozwiązać mój problem. Miałem zdarzenie najechania i kliknięcia przycisku. Firefox na MAC zachowywał się tak, jak chciałem. Oznacza to, że pokaż podpowiedź po najechaniu kursorem, nie pokazuj podpowiedzi po kliknięciu. W innych przeglądarkach i systemie operacyjnym, kiedy klikam, pojawia się podpowiedź i pozostaje bez zmian. Nawet jeśli przeniosę mysz do innych przycisków w celu najechania kursorem. Oto, co miałem:

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

To jest poprawka:

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

Możesz również dodać:

onclick="this.blur()"

Działające rozwiązanie

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

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

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

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

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

Używam podpowiedzi bootstrap w cycle.js i żadne z powyższych nie zadziałało.

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

});

Dynamicznie wyłączałem przycisk zapisywania, a potem był problem.

Użyj tej funkcji w dokumencie

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

skrzypce

Wypróbowałem większość rozwiązań podanych w poprzednich odpowiedziach, ale żadne z nich nie zadziałało.

Mój problem dotyczy DataTable. Poniższy kod działa u 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'); }); }

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

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

W moim przypadku na to była poprawka:

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

Nie przestrzegałem tej zasady z dokumentacji Bootstrap:

Podpowiedzi muszą zostać ukryte, zanim odpowiadające im elementy zostaną usunięte z DOM.

Można to również osiągnąć w kodzie 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ć tego sposobu dla starszych wersji, ponieważ zaakceptowana odpowiedź nie zadziałała dla mnie i napisałem ten kod dla siebie i działa dobrze.

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

Jeśli ktoś chce ustawić podpowiedź, która będzie się wyświetlać 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 wymuszonego rozmycia () może zmniejszyć wrażenia użytkownika. Nie zrobiłbym tego. Zauważyłem, że usunięcie „data-original-title”, a także usunięcie atrybutów „data-toggle” i „title” zadziałało.

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