Bootstrap 4 podpowiedź
Bootstrap 4 podpowiedź
Komponent Tooltip to małe wyskakujące okienko, które pojawia się, gdy użytkownik przesunie wskaźnik myszy nad element:
Jak utworzyć podpowiedź
Aby utworzyć podpowiedź, dodaj data-toggle="tooltip"
atrybut do elementu.
Użyj titleatrybutu, 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-placementatrybutu, 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>
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 .