Bootstrap Popover Plugin
Popover Plugin
Plugin Popover je podobný nápovědám; je to vyskakovací okno, které se objeví, když uživatel klikne na prvek. Rozdíl je v tom, že popover může obsahovat mnohem více obsahu.
Tip: Pluginy lze zahrnout jednotlivě (pomocí samostatného souboru „popover.js“ Bootstrapu) nebo všechny najednou (pomocí „bootstrap.js“ nebo „bootstrap.min.js“).
Jak vytvořit Popover
Chcete-li vytvořit vyskakovací okno, přidejte data-toggle="popover"
atribut k prvku.
Pomocí titleatributu zadejte text záhlaví vyskakovacího okna a pomocí data-contentatributu zadejte text, který se má zobrazit v těle vyskakovacího okna:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Poznámka: Popovers musí být inicializovány pomocí jQuery: vyberte zadaný prvek a zavolejte popover()metodu.
Následující kód povolí všechna vyskakovací okna v dokumentu:
Příklad
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Umístění Popovers
Ve výchozím nastavení se vyskakovací okno zobrazí na pravé straně prvku.
Pomocí data-placementatributu nastavte polohu vyskakovacího okna na horní, spodní, levé nebo pravé straně prvku:
Příklad
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Tip: Můžete také použít atribut data-placement s hodnotou „auto“, což umožní prohlížeči rozhodnout o pozici vyskakovacího okna. Pokud je například hodnota „auto left“, vyskakovací okno se zobrazí na levé straně, pokud je to možné, jinak na pravé straně.
Zavírání Popovers
Ve výchozím nastavení se vyskakovací okno zavře, když znovu kliknete na prvek. Můžete však použít data-trigger="focus"atribut, který při kliknutí mimo prvek zavře vyskakovací okno:
Příklad
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Tip: Pokud chcete, aby se vyskakovací okno zobrazil, když najedete ukazatelem myši na prvek, použijte data-triggeratribut s hodnotou "hover":
Příklad
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Kompletní referenční nabídka Bootstrap
Úplnou referenci o všech možnostech, metodách a událostech popover najdete v naší Referenční příručce pro Bootstrap JS Popover .