twitter-bootstrap
Etykietka
Szukaj…
Uwagi
Etykietka to element interfejsu użytkownika, który wygląda jak małe wyskakujące okienko. Zwykle jest uruchamiany, gdy użytkownik umieści wskaźnik nad innym elementem, bez klikania go.
Ze względu na wydajność podpowiedzi muszą być inicjowane za pomocą jQuery. Poniższy kod włączy wszystkie podpowiedzi w DOM:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Podpowiedzi do pozycjonowania
Domyślnie etykieta pojawi się na górze elementu. Możemy użyć atrybutu data-placement aby ustawić pozycję podpowiedzi na górze, dole, lewej lub prawej stronie elementu.
<a href="#" data-toggle="tooltip" data-placement="top" title="Top tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Left tooltip">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Right tooltip">Hover</a
Możemy również użyć data-placement="auto" , aby dynamicznie zmienić orientację podpowiedzi. Etykietka narzędzia w następnym przykładzie podpowiedź będzie wyświetlana po lewej stronie, jeśli to możliwe, w przeciwnym razie będzie wyświetlana po prawej stronie.
<a href="#" data-toggle="tooltip" data-placement="auto left" title="To the left?">Hover</a
Podstawowy przykład
Aby utworzyć etykietkę, musimy jedynie dodać atrybut data-toggle="tooltip" i title do elementu HTML, który będzie zawierał etykietkę. Atrybut tytułu służy do określania tekstu wyświetlanego w etykiecie narzędzia.
<span data-toggle="tooltip" title="Hello world!">Hover over me</span>
