Popover Plugin
Popover plugin - ul este similar cu ponturile; este o casetă de tip pop-up care apare atunci când utilizatorul face clic pe un element. Diferența constă în faptul că popover poate conține mult mai mult conținut.
Sfat: Plugin - uri pot fi incluse în mod individual (folosind Bootstrap's individuale "popover.js" fișier), sau dintr -o dată (folosind "bootstrap.js" sau "bootstrap.min.js" ).
Cum Pentru a crea un Popover
Pentru a crea un popover , adăugați data-toggle="popover" de data-toggle="popover" atribut la un element.
Utilizați title atribut pentru a specifica textul de antet al popover, și de a folosi data-content de popover's data-content atribut pentru a specifica textul care trebuie să fie afișat în interiorul popover's corp:
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> Notă: Popovers trebuie inițializată cu jQuery: selectați elementul specificat și apelați popover() metoda.
Codul de mai jos va permite toate popovers din document:
Exemplu
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Încearcă - l singur » Poziționarea Popovers
În mod implicit, popover va apărea în partea dreaptă a elementului.
Utilizați o data-placement de popover data-placement atribut pentru a stabili poziția popover pe partea de sus, de jos, stânga sau dreapta a elementului:
Exemplu
<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>
Încearcă - l singur » Sfat: puteți utiliza , de asemenea, o data-placement de "auto" popover data-placement atribut cu o valoare de "auto" , care va permite browser - ul să decidă poziția popover . De exemplu, în cazul în care valoarea este "auto left" , The popover va apărea în partea stângă atunci când este posibil, în caz contrar pe dreapta.
închiderea Popovers
Implicit, popover este închis atunci când faceți clic pe elementul din nou. Cu toate acestea, puteți utiliza data-trigger="focus" de popover data-trigger="focus" , atributul care va închide popover atunci când faceți clic în afara elementului:
Exemplu
<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>
Încearcă - l singur » Sfat: Dacă doriți ca popover să fie afișat atunci când mutați cursorul mouse - ului peste elementul, utilizați data-trigger de "hover" data-trigger atribut cu o valoare de "hover" :
Exemplu
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
Încearcă - l singur » Finalizarea Bootstrap Popover de referință
Pentru o referință completă a tuturor popover opțiuni, metode și evenimente, du - te la nostru Bootstrap JS Popover de referință .