Podoba mi się pomysł wtyczki Twistsy, która jest dołączona jako część Twitter Boostrap, ale nie wydaje się działać poprawnie.

Oto jsfiddle: http://jsfiddle.net/burlesona/dupyr/

Jak widać, używając ustawień domyślnych zgodnie z zaleceniami Dokumentów, pojawia się podpowiedź, gdy najechałeś na kotwicę przechylającą narzędzie, ale nie odsuwa się, gdy przesuwasz mysz.

Rozumiem, że wygląd podpowiedzi opiera się na CSS, ale na stronie Dokumenty Twittera są dodawane i usunięte z Domu przez skrypt, podczas gdy w tym przykładzie iw moich własnych testach lokalnych skrypt dodaje końcówkę, ale nigdy nie usuwa końcówkę to.

Oto link do skryptu: http://twitter.github.com/ Bootstrap / 1.3.0 / Bootstrap-Twistsy.js

Jakieś pomysły / sugestie? Jestem dość zdezorientowany, dlaczego zachowuje się to tak, jak jest.

Alternatywnie, jeśli ktoś ma lepszą sugestię dla czystej, lekkiej jQuery Tooltip wtyczki, daj mi znać.

Dzięki!

4
Andrew 3 październik 2011, 08:47

4 odpowiedzi

Najlepsza odpowiedź

Jak zauważyłeś, twój kod nie działa, ponieważ nie dodałeś pliku CSS do swoich zasobów.

Przykład roboczy: http://jsfiddle.net/dupyr/1/

Ponieważ w tym pliku CSS nazywane są dwie klasy

.fade {
    -moz-transition: opacity 0.15s linear 0s;
    opacity: 0;
}
.fade.in {
    opacity: 1;
}

Po przenoszeniu myszy, końcówka narzędzi jest przeniesiona do ciała i dostaje class="twipsy fade in" in zostaje usunięta na funkcji Ukryj końcówki narzędzia, dzięki czemu jest niewidoczny (opacity=0).

Przykład roboczy z minimalnymi CSS: http://jsfiddle.net/dupyr/3/

Należy pamiętać, że nie usuwa elementu z DOM jak w oryginalnym przykładzie. Większe śledztwo w CSS z pewnością rzuci tam trochę światła.

Jeśli zapytasz mnie o moją ulubioną wtyczkę napiwkową, używam lekkiej wtyczki narzędzia Jörn Zaefferera (4kB skompresowany). Dobrze pasuje do mojego celu.

Link tutaj: http://bassistance.de/jquery-plugins/jquery-plingin-tooltip/

15
naveen 3 październik 2011, 06:18

Nie jestem pewien, dlaczego Trypsy nie działa, ale Tipsy działa: http://jsfiddle.net/x6h2y/

Tipsy to oryginalna wtyczka jquery, która została zmodyfikowana przez Twittera dla nich:

(Twistsy jest) w oparciu o doskonałą wtyczkę jQuery.Tipsy napisaną przez ramę Jason; Twistsy to zaktualizowana wersja, która nie polega na obrazach, wykorzystuje CSS3 do animacji i atrybutów danych do przechowywania tytułu!

0
zengr 3 październik 2011, 05:52

Albo możesz użyć "podpowiedzi" w ten sposób:

<div rel="tooltip" href="#" data-toggle="tooltip" data-placement="top" data-original-title="hi">I'm here</div>

<script type='text/javascript'> $(window).load(function(){ $('div[rel=tooltip]').tooltip(); });</script>

REL: http://twitter.github.com/bootstrap/javascript.html#tooltips9/ A >.

0
Evan 6 marzec 2013, 08:21

Tak, wydaje się być usunięte jako oddzielna wtyczka teraz (2.3.1 w momencie pisania), ale jest Plugin ToolTip, który jest wyposażony w plik główny bootstrap.js, aby to zrobić.

0
Ralph Lavelle 3 kwiecień 2013, 03:03