Bootstrap 4 Popover
Bootstrap 4 Popover
Komponenta 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.
Přepnout vyskakovací oknoJak 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>
Poznámka: Atributy umístění nefungují podle očekávání, pokud pro ně není dostatek místa. Například: pokud použijete horní umístění v horní části stránky (kde pro něj není místo), zobrazí se místo toho vyskakovací okno pod prvkem nebo vpravo (kde je pro něj místo).
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 .