JS Tooltip (tooltip.js)
Il plugin Tooltip è piccola finestra pop-up che appare quando l'utente sposta il puntatore del mouse su un elemento.
Per un tutorial su descrizioni comandi, leggere la nostra Bootstrap Tooltip tutorial .
Via data-* Attributi
Il data-toggle="tooltip" attiva la descrizione comando.
Il title attributo specifica il testo che dovrebbe essere visualizzato all'interno del tooltip.
Via JavaScript
Le descrizioni comandi non sono plugin CSS-only, e quindi devono essere inizializzati con jQuery: selezionare l'elemento specificato e chiamare il tooltip() metodo.
Esempio
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
Prova tu stesso " Opzioni tooltip
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 dissolvenza quando mostrare o nascondere il tooltip
| Provalo |
| contenitore | stringa o il falso booleano | falso | Aggiunge il tooltip ad un elemento specifico. Esempio: container: 'body' | Provalo |
| delay | number, or object | 0 | Specifica il numero di millisecondi ci vorrà per mostrare e nascondere il tooltip. Per specificare un ritardo per la visualizzazione e un altro per nascondere, utilizzare la struttura oggetto: delay: {show: 500, hide: 100} - che avrà 500 ms per mostrare il tooltip , ma solo 100 ms per nasconderlo | Provalo |
| html | boolean | false | Specifica se accettare tag HTML nella descrizione:
Quando è impostato su false (impostazione predefinita), jQuery's text() verrà utilizzato il metodo. Utilizzare questo se siete preoccupati per gli attacchi XSS | Provalo |
| placement | string | "top" | Specifica la posizione di tooltip. Valori possibili:
| Provalo |
| selector | string, or the boolean false | false | Aggiunge il tooltip ad un selettore specificato | Provalo |
| template | string | HTML di base da utilizzare durante la creazione del tooltip. Il titolo del tooltip verrà inserito l'elemento che ha la classe .tooltip-inner e l'elemento con la classe .tooltip-arrow diventerà la freccia del tooltip. L'elemento di involucro più esterno dovrebbe avere la .tooltip di classe. | ||
| title | string | "" | Specifica il testo che dovrebbe essere visualizzato all'interno del tooltip | Provalo |
| trigger | string | "hover focus" | Specifica come il suggerimento viene attivato. Valori possibili:
| Provalo |
| viewport | string, or object | {selector: "body", padding: 0} | Mantiene il tooltip nei limiti di questo elemento. Esempio: viewport: '#viewport' o {selector: '#viewport', padding: 0} |
Metodi tooltip
La seguente tabella elenca i metodi tooltip tutti disponibili.
| metodo | Descrizione | Provalo |
|---|---|---|
| .tooltip( options ) | Attiva il tooltip con un'opzione. Vedere opzioni di cui sopra per i valori validi | Provalo |
| .tooltip("show") | Mostra il tooltip | Provalo |
| .tooltip("hide") | Nasconde il tooltip | Provalo |
| .tooltip("toggle") | Alterna il tooltip | Provalo |
| .tooltip("destroy") | Nasconde e distrugge il tooltip | Provalo |
Eventi tooltip
La seguente tabella elenca gli eventi tooltip tutti disponibili.
| Evento | Descrizione | Provalo |
|---|---|---|
| show.bs.tooltip | Si verifica quando il tooltip è in procinto di essere mostrato | Provalo |
| shown.bs.tooltip | Si verifica quando il tooltip è completamente mostrato (dopo le transizioni CSS hanno completato) | Provalo |
| hide.bs.tooltip | Si verifica quando il tooltip è in procinto di essere nascosto | Provalo |
| hidden.bs.tooltip | Si verifica quando il tooltip è completamente nascosta (dopo le transizioni CSS hanno completato) | Provalo |
Esempi
Personalizzato Tooltip design
Utilizzare i CSS per personalizzare l'aspetto del tooltip:
Esempio
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color:
#73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top >
.tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom
> .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left
> .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right
> .tooltip-arrow {
border-right: 5px solid black;
} Prova tu stesso "