Bootstrap Tooltip Plugin
Tooltip Plugin
Plugin Tooltip je malé vyskakovací okno, které se zobrazí, když uživatel přesune ukazatel myši nad prvek:
Tip: Pluginy lze zahrnout jednotlivě (pomocí samostatného souboru „tooltip.js“ Bootstrapu) nebo všechny najednou (pomocí „bootstrap.js“ nebo „bootstrap.min.js“).
Jak vytvořit nápovědu
Chcete-li vytvořit nápovědu, přidejte data-toggle="tooltip"
atribut k prvku.
Pomocí title
atributu určete text, který se má zobrazit uvnitř popisku:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Poznámka: Popisky musí být inicializovány pomocí jQuery: vyberte zadaný prvek a zavolejte tooltip()
metodu.
Následující kód povolí všechny popisky v dokumentu:
Příklad
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Popisky umístění
Ve výchozím nastavení se popisek zobrazí v horní části prvku.
Pomocí data-placement
atributu nastavte polohu popisku nahoře, dole, vlevo nebo vpravo od prvku:
Příklad
<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>
Tip: Můžete také použít data-placement
atribut s hodnotou „ auto
“, což umožní prohlížeči rozhodnout o pozici popisku. Pokud je například hodnota " auto left
", zobrazí se nápověda pokud možno na levé straně, jinak na pravé straně.
Kompletní popis nápovědy k bootstrapu
Úplnou referenci o všech možnostech, metodách a událostech s nápovědou najdete v naší Referenční příručce k nástroji Bootstrap JS .