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

115

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.

SilentCry
źródło
W moim pytaniu też nie działa w linku, spójrzmy tam. Jest ten sam problem.
SilentCry

Odpowiedzi:

241

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/

davidkonrad
źródło
1
Dziękuję David, to naprawdę działa. Ostatnio źle zrozumiałem opcję wyzwalacza dla podpowiedzi, teraz mam rację.
SilentCry
1
@SilentCry Pamiętaj tylko, do kogo celujesz, wywołanie „najechania kursorem” może nie zawsze być łatwe / powszechne.
phk
3
@davidkonrad Platformy mobilne, niewidomi użytkownicy. Może również wyjaśnić, dlaczego domyślnie ustawili „fokus po najechaniu kursorem”.
phk
2
@phk, bootstrap ma ogólny problem polegający na tym, że nie jesteśmy pierwsi mobilni, w przypadku osób niewidomych powinniśmy używać atrybutów aria. Przy okazji jest świetne narzędzie do testowania użyteczności opracowane dla kanadyjskich władz z kilkoma "poziomami" które możesz spełnić -> achecker.ca/checker/index.php mój kraj nie ma tych standardów, ale warto je trzymać tak czy siak.
davidkonrad
1
Możesz rzucić okiem na odpowiedź Karmonik Coli poniżej. Ciągle wyświetla podpowiedź na fokus.
David Stosik
63

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.

Nitai
źródło
1
Musi to być zaakceptowana odpowiedź, a także powinna zostać zaimplementowana w bazie kodu bootstrap.
kjdion84
5
Było to niezwykle pomocne w przypadku etykiet narzędzi bootstrap umieszczanych na przyciskach z wyzwalaczem „najechania kursorem”, który powoduje asynchroniczne ogłaszanie zwrotne (tj. Wyświetlaj panele modalne). Bez tego ogłaszanie zwrotne po naciśnięciu przycisku powoduje, że podpowiedź „blokuje się” i nigdy nie znika.
bradykey
1
W moim przypadku wyłączałem przycisk przesyłania podczas wykonywania akcji Ajax. Gdy proces Ajax był uruchomiony, podpowiedź pozostała, ponieważ przycisk został wyłączony. Po zakończeniu procesu Ajax przycisk stałby się ponownie „dostępny”. Najechanie kursorem na przycisk, a następnie wyłączenie go spowoduje zamknięcie podpowiedzi. Rozwiązanie Nitai naprawiło wszystko. Podpowiedź ukrywa się teraz po kliknięciu i nadal działa po najechaniu kursorem, gdy przycisk znów stanie się aktywny.
HPWD,
Zgadzam się z @ kjdion84. Walczyłem, dopóki tego nie znalazłem
Ahmad
9

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 :)

Nienormalny_
źródło
Miałem problem tylko z przyciskami siatki Telerik Kendo. Kiedy kliknąłem, opis narzędzia nie chował się. To rozwiązało problem!
John81
8

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 ...

Kamornik Cola
źródło
U mnie też działa i ma tę przewagę nad przyjętym rozwiązaniem, że wyświetla podpowiedź w skupieniu.
David Stosik
3

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');
    });
   }
spec
źródło
2

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ź.

Jestino Sam
źródło
2

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'}); 
user1322977
źródło
2

Możesz również dodać:

onclick="this.blur()"
Sergey Koshkin
źródło
1
czym się to różni od tego, co zaproponował Kamornik Cola (z wyjątkiem implementacji bez jQuery)? Proponuję dodać wyjaśnienie, aby odpowiedź była pomocna. Z poważaniem
JakowL
2

Działające rozwiązanie

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

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

},500);    // Hides tooltip in 500 milliseconds
    });
Alfa
źródło
Chociaż ten kod może odpowiedzieć na pytanie, zapewnia dodatkowy kontekst dotyczący tego, dlaczego i / lub jak ten kod odpowiada, poprawia jego długoterminową wartość.
Adam
@Adam Nie udało mi się znaleźć na forach żadnego działającego rozwiązania, aby ukryć podpowiedź po kliknięciu dowolnego <a>, <button> lub innych elementów, które mają dołączoną funkcjonalność lub wygląd przycisku.
Alpha
1

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();
});
soroxis
źródło
1
czy możesz ponownie uzyskać podpowiedź po najechaniu kursorem?
Wisznu
0

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');
}
Brian C.
źródło
0

To działa dla mnie:

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

});

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

Devendra Singraul
źródło
Tutaj zapisuję identyfikator mojego przycisku
Devendra Singraul
0

Użyj tej funkcji w dokumencie

 $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip({
               trigger : 'hover'
            });
    });
Siva Ganesh
źródło
0

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.

طلحة
źródło
0

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

CZEMU
źródło
0

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();
});
Hanuman Sahay
źródło
0

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.

Gabi L
źródło
0

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>
csharpsql
źródło
Niestety to nie działa, a podpowiedź nadal się zacina.
Fwd079
0

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');
});
Złota Gwardia
źródło
0

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')
})
javadb9
źródło
0

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");
Gregory Bologna
źródło