2013-08-23 18 views
12

Mam aplikację Django z front-endem zaprojektowaną na Twitterze Bootstrap 3. Cała moja stylizacja i JS działają dobrze włączając modały, itp ... Ale nie mogę dla życie mnie otrzymuje podpowiedzi do robienia czegoś ...Bootstrap 3 Tooltips lub Popovers nie działa

Nie wrzucam żadnych błędów do Firebug.

Oto kolejność mój obejmuje:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script> 

Tu jest mój przykład wezwanie do podpowiedzi wziąłem prosto z bootstrap stronie:

<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a> 

Ktoś jeszcze ma kłopoty z 2 elementy?

Jestem prawie pewien, że to coś głupiego, co zrobiłem.

Wszystkie inne JS wpływa przewidziane w Bootstrap 3 jak czasowniki modalne & wypustki działają bez zarzutu ...

+0

Nie powinieneś mieć atrybutu 'data-title', zamiast tylko' title'? – knownasilya

+0

Skopiowano przykład bezpośrednio z witryny bootstrap. Przełączono go na tytuł danych, ale nic się nie działo ... Jako notatkę dodatkową usunąłem również wszystkie inne JS w przypadku, gdyby wystąpił jakiś dziwny konflikt, ale to też nie pomogło. – xXPhenom22Xx

+0

Wygląda jak jakiś błąd: http://jsfiddle.net/knownasilya/LhzwF/1/ Zobacz także mój komentarz na temat odpowiedzi @steakchasers. – knownasilya

Odpowiedz

33

Wystarczy włączyć podpowiedź pośrednictwem javascript:

$('some id or class that you add to the above a tag').tooltip() 
+0

Dziękuję, wiedziałem, że to głupie ... =) – xXPhenom22Xx

+4

Nie powinieneś tego robić, ponieważ api danych jest ich api pierwszej klasy, a javascript jeden jest wtórny. Zobacz [tutaj] (http://getbootstrap.com/javascript/#js-data-attrs). – knownasilya

+0

Kiedy dodałem kawałek JS zaczął działać, myślałem, że nie będzie to potrzebne, ale na pewno nie jest tak w rzeczywistości? – xXPhenom22Xx

1

podpowiedzi muszą być inicjowane z jQuery :

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> 

<script> 
$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 
</script> 

Sprawdź to link