Popover Plugin
Popover Wtyczka jest podobna do etykiet; Jest to okno pop-up, który pojawia się, gdy użytkownik kliknie na elemencie. Różnica polega na tym, że popover może zawierać znacznie więcej treści.
Wskazówka: Wtyczki mogą być użyte pojedynczo (stosując Bootstrap's poszczególne "popover.js" pliku) lub wszystkie na raz (za pomocą "bootstrap.js" lub "bootstrap.min.js" ).
Jak utworzyć Popover
Aby utworzyć popover dodaj data-toggle="popover" atrybutu do elementu.
Użyj title atrybut określić tekst nagłówka z popover i użyć data-content atrybut określić tekst, który powinien być wyświetlany wewnątrz popover's organizmie:
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> Uwaga: Popovers muszą być inicjowane z jQuery: wybór określonego elementu i wywołać popover() metody.
Poniższy kod pozwoli wszystkim popovers w dokumencie:
Przykład
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Spróbuj sam " pozycjonowanie Popovers
Domyślnie popover pojawia się z prawej strony elementu.
Użyj data-placement atrybut, aby ustawić pozycję popover na górze, na dole, po 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>
Spróbuj sam " Wskazówka: Można również użyć atrybutu danych placement o wartości "auto" , która pozwoli przeglądarka zdecyduje pozycję popover . Na przykład, jeśli wartość "auto left" , The popover będzie wyświetlany po lewej stronie, gdy to możliwe, w przeciwnym wypadku po prawej stronie.
zamknięcie Popovers
Domyślnie popover jest zamknięty po kliknięciu na elemencie ponownie. Jednakże, można użyć data-trigger="focus" atrybut, który zamknie popover po kliknięciu na zewnątrz elementu:
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>
Spróbuj sam " Wskazówka: Jeśli chcesz popover być wyświetlane podczas przesuwania wskaźnika myszy nad elementem, użyj data-trigger atrybut o wartości "hover" :
Przykład
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
Spróbuj sam " Wypełnij Bootstrap Popover Reference
Pełną odniesienia wszystkich popover opcje, metod i zdarzeń, przejdź do naszej Bootstrap JS Popover Reference .