Najnowsze tutoriale tworzenie stron internetowych
 

Bootstrap tooltip Plugin


Tooltip Plugin

Wtyczka Etykietka jest małe okienko pop-up, który pojawia się, gdy użytkownik przesuwa wskaźnik myszy nad elementem:

Najedź mnie

Wskazówka: Wtyczki mogą być użyte pojedynczo (stosując Bootstrap's poszczególne "tooltip.js" pliku) lub wszystkie na raz (za pomocą "bootstrap.js" lub "bootstrap.min.js" ).


Jak utworzyć podpowiedź

Aby utworzyć podpowiedź, dodać data-toggle="tooltip" atrybutu do elementu.

Użyj title atrybut określić tekst, który powinien być wyświetlany wewnątrz podpowiedzi:

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

Uwaga: podpowiedzi muszą być inicjowane z jQuery: wybór określonego elementu i wywołać tooltip() metody.

Poniższy kod pozwoli wszelkie podpowiedzi w dokumencie:

Przykład

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

Pozycjonowanie podpowiedzi

Domyślnie podpowiedzi pojawi się w górnej części elementu.

Użyj data-placement atrybut, aby ustawić pozycję podpowiedzi na górze, na dole, po 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>
Spróbuj sam "

Wskazówka: Można również użyć data-placement atrybut o wartości "auto", która pozwoli przeglądarka zdecyduje pozycję podpowiedzi. Na przykład, jeśli wartość jest "auto left" , tooltip pojawi się po lewej stronie, jeśli to możliwe, w przeciwnym razie po prawej stronie.


Wypełnij Bootstrap Tooltip Reference

Pełną odniesienia wszystkich Tooltip Opcje, metod i zdarzeń, przejdź do naszej Bootstrap JS Tooltip Reference .