Bootstrap 4 Popover
Bootstrap 4 Popover
Komponent Popover jest podobny 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.
Przełącz popoverJak 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>
Uwaga: atrybuty miejsca docelowego nie działają zgodnie z oczekiwaniami, jeśli nie ma na nie wystarczająco dużo miejsca. Na przykład: jeśli użyjesz górnego miejsca docelowego na górze strony (gdzie nie ma na to miejsca), zamiast tego wyświetli się popover pod elementem lub po prawej (gdziekolwiek jest na to miejsce).
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 .