Wtyczka Bootstrap Tooltip
Wtyczka podpowiedzi
Wtyczka Tooltip to małe wyskakujące okienko, które pojawia się, gdy użytkownik najedzie wskaźnikiem myszy na element:
Wskazówka: Wtyczki można dołączać pojedynczo (za pomocą indywidualnego pliku „tooltip.js” Bootstrap) lub wszystkie naraz (za pomocą „bootstrap.js” lub „bootstrap.min.js”).
Jak utworzyć podpowiedź
Aby utworzyć podpowiedź, dodaj data-toggle="tooltip"
atrybut do elementu.
Użyj title
atrybutu, aby określić tekst, który powinien być wyświetlany w podpowiedzi:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Uwaga: Etykietki narzędzi należy zainicjować za pomocą jQuery: wybierz określony element i wywołaj tooltip()
metodę.
Poniższy kod włączy wszystkie podpowiedzi w dokumencie:
Przykład
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Podpowiedzi dotyczące pozycjonowania
Domyślnie podpowiedź pojawi się na górze elementu.
Użyj data-placement
atrybutu, aby ustawić pozycję podpowiedzi na górze, na dole, lewej lub prawej stronie elementu:
Przykład
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
Wskazówka: możesz również użyć data-placement
atrybutu o wartości „ auto
”, co pozwoli przeglądarce określić pozycję podpowiedzi. Na przykład, jeśli wartość to „ auto left
”, podpowiedź będzie wyświetlana po lewej stronie, jeśli to możliwe, w przeciwnym razie po prawej.
Kompletny opis podpowiedzi na temat Bootstrap
Aby uzyskać pełne informacje na temat wszystkich opcji, metod i zdarzeń etykietek narzędzi, przejdź do naszego podręcznika Bootstrap JS Tooltip Reference .