Nie wyświetla się podpowiedź Bootstrap

Question

Próbuję użyć Bootstrap tooltip w mojej aplikacji. Obecnie mam następujące:

<button type="button" class="btn btn-default" 
     data-toggle="tooltip" data-placement="left" 
     title="Tooltip on left"> 
      Tooltip on left 
</button> 

Niestety, moja etykieta nie wyświetla się. Próbuję dowiedzieć się, co robię źle. Wiem, że można go utworzyć za pomocą JavaScript. Jednak próbuję zdefiniować moją etykietkę narzędziową w sposób deklaratywny. Potwierdziłem, że dołączono plik Tooltip.js. Jednak nie mogę zrozumieć, co robię źle.

Czy można używać podpowiedzi w czystym deklaratywnym znaczeniu? Jeśli tak, czy ktoś może mi pokazać, jak za pomocą przykładu JSFiddle lub Bootply? Naprawdę walnę głową w to.

Answer 1

Nie, nie można używać tej podpowiedzi w czystym deklaratywnym znaczeniu. Z Docs:

Opt-in functionality:
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

Więc trzeba zadzwonić .tooltip() ręcznie w JavaScripcie tak:

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

lub użyj wybieraka cokolwiek chcesz.

Working Demo in jsFiddle

Która powinna wyglądać następująco:

Answer 2

W moim projekcie mam div z klasą .btn-grupowej i 3 '' elementów z klasy BTN. Inicjowanie z Bootstrap oficjalnego kodu nie działa (używam Twitter.Bootstrap.less, ja nie wiem, czy ma jakiś diference):

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

Potem znalazłem rozwiązanie na innym StackOverflow Odpowiedział ImaJedi4ever że działa jak czar dla mnie, aby zainicjować bootstrap podpowiedź:

$(function(){ 
    $('body').tooltip({ selector: '[data-toggle="tooltip"]' }); 
}); 

Answer 3

Miałem problem pokazując go w meteor z zareagować i bootstrap 4a. to działa jak magia!

componentDidMount() { 
    $(function(){ 
     $('body').tooltip({ selector: '[data-toggle="tooltip"]' }); 
    }); 
},