Wtyczka Bootstrap Popover
Wtyczka Popover
Wtyczka Popover jest podobna do podpowiedzi; jest to wyskakujące okienko, które pojawia się, gdy użytkownik kliknie element. Różnica polega na tym, że popover może zawierać znacznie więcej treści.
Wskazówka: Wtyczki można dołączać pojedynczo (za pomocą indywidualnego pliku „popover.js” Bootstrap) lub wszystkie naraz (za pomocą „bootstrap.js” lub „bootstrap.min.js”).
Jak stworzyć popover
Aby utworzyć popover, dodaj data-toggle="popover"
atrybut do elementu.
Użyj titleatrybutu, aby określić tekst nagłówka popovera i użyj data-contentatrybutu, aby określić tekst, który powinien być wyświetlany w treści popovera:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Uwaga: Popovery należy zainicjować za pomocą jQuery: wybierz określony element i wywołaj popover()metodę.
Poniższy kod włączy wszystkie okienka popover w dokumencie:
Przykład
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Pozycjonowanie popoverów
Domyślnie popover pojawi się po prawej stronie elementu.
Użyj data-placementatrybutu, aby ustawić pozycję popovera na górze, na dole, lewej lub prawej stronie elementu:
Przykład
<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>
Wskazówka: możesz również użyć atrybutu data-placement z wartością „auto”, co pozwoli przeglądarce decydować o pozycji popovera. Na przykład, jeśli wartość to „auto left”, popover będzie wyświetlany po lewej stronie, jeśli to możliwe, w przeciwnym razie po prawej stronie.
Zamykanie popoverów
Domyślnie popover jest zamykany po ponownym kliknięciu elementu. Możesz jednak użyć data-trigger="focus"atrybutu, który zamknie okienko popover po kliknięciu poza elementem:
Przykład
<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>
Wskazówka: jeśli chcesz, aby popover był wyświetlany, gdy przesuniesz wskaźnik myszy nad element, użyj data-triggeratrybutu o wartości „hover”:
Przykład
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Kompletna dokumentacja Bootstrap Popover
Aby uzyskać pełne informacje o wszystkich opcjach, metodach i zdarzeniach popover, przejdź do naszego podręcznika Bootstrap JS Popover Reference .