JS Popover (popover.js)
Il Popover plugin è simile a descrizioni dei comandi; si tratta di una finestra pop-up che appare quando l'utente fa clic su un elemento. La differenza è che il popover può contenere molto più contenuti.
Dipendenza Plugin: Popovers richiedono il plugin tooltip (tooltip.js) da includere nella versione di Bootstrap .
Per un tutorial su Popovers , leggere la nostra Bootstrap Popover tutorial .
Via data-* Attributi
Il data-toggle="popover" attiva la popover .
Il title attributo specifica il testo dell'intestazione del popover .
Il data-content attributo specifica il testo che dovrebbe essere visualizzato all'interno del popover's corpo.
Esempio
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
Prova tu stesso " Via JavaScript
Popovers non sono plugin CSS-only, e quindi devono essere inizializzati con jQuery: selezionare l'elemento specificato e chiamare il popover() metodo.
Esempio
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
Prova tu stesso " Popover Opzioni
Le opzioni possono essere passati attraverso gli attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome opzione per data- , come nel data-placement="" .
| Nome | Digitare | Predefinito | Descrizione | Provalo |
|---|---|---|---|---|
| animation | boolean | true | Specifica se aggiungere un effetto di transizione CSS di dissolvenza in apertura e chiusura del popover
| Provalo |
| container | string, or the boolean false | false | Aggiunge il popover ad un elemento specifico. Esempio: container: 'body' | Provalo |
| content | string | "" | Specifica il testo all'interno del popover's body | Provalo |
| delay | number, or object | 0 | Specifica il numero di millisecondi che intende adottare per aprire e chiudere il popover . Per specificare un ritardo per l'apertura e un altro per la chiusura, utilizzare la struttura oggetto: delay: {show: 500, hide: 100} - che avrà 500 ms per aprire la popover , ma solo 100 ms per chiuderla | Provalo |
| html | boolean | false | Specifica se accettare tag HTML nel popover :
Quando è impostato su false (impostazione predefinita), di jQuery text() verrà utilizzato il metodo. Utilizzare questo se siete preoccupati per gli attacchi XSS | Provalo |
| placement | string | "right" | Specifica la popover posizione. Valori possibili:
| Provalo |
| selector | string, or the boolean false | false | Aggiunge il popover ad un selettore specificato | Provalo |
| template | string | HTML di base da utilizzare durante la creazione del popover. Il popover's titolo verrà iniettato nel .popover-titolo. Il popover's contenuto verrà iniettato nel .popover-contenuti. .arrow diventerà il popover's freccia. L'elemento di involucro più esterno dovrebbe avere la .popover di classe. | ||
| title | string | "" | Specifica il testo di intestazione del popover | Provalo |
| trigger | string | "click" | Specifica come il popover viene attivato. Valori possibili:
| Provalo |
| viewport | string, or object | {selector: "body", padding: 0} | Mantiene la popover entro i limiti di questo elemento. Esempio: viewport: '#viewport' o {selector: '#viewport', padding: 0} |
Popover Metodi
La seguente tabella elenca tutti disponibili popover metodi.
| metodo | Descrizione | Provalo |
|---|---|---|
| .popover( options ) | Attiva il popover con un'opzione. Vedere opzioni di cui sopra per i valori validi | Provalo |
| .popover("show") | Mostra il popover | Provalo |
| .popover("hide") | Nasconde la popover | Provalo |
| .popover("toggle") | Alterna la popover | Provalo |
| .popover("destroy") | Nasconde e distrugge la popover | Provalo |
Popover Eventi
La seguente tabella elenca tutti disponibili popover eventi.
| Evento | Descrizione | Provalo |
|---|---|---|
| show.bs.popover | Si verifica quando il popover sta per essere mostrato | Provalo |
| shown.bs.popover | Si verifica quando il popover è completamente mostrato (dopo le transizioni CSS hanno completato) | Provalo |
| hide.bs.popover | Si verifica quando il popover sta per essere nascosto | Provalo |
| hidden.bs.popover | Si verifica quando il popover è completamente nascosta (dopo le transizioni CSS hanno completato) | Provalo |
Esempi
Personalizzato Popover design
Utilizzare i CSS per personalizzare l'aspetto del popover :
Esempio
/* Popover */
.popover {
border: 2px dotted
red;
}
/* Popover Header */
.popover-title {
background-color:
#73AD21;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}
/* Popover
Body */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}
/* Popover Arrow */
.arrow {
border-right-color: red !important;
} Prova tu stesso "