Bootstrap Tooltips

BY admin
|
Pubblicità

In questo tutorial imparerai come creare tooltip con Bootstrap.

Creazione di Tooltips con Bootstrap

Un tooltip è un piccolo pop up che appare quando l’utente posiziona il puntatore del mouse su un elemento come link o pulsanti per fornire un suggerimento o informazioni sull’elemento su cui si passa il mouse.

I tooltip possono essere molto utili per i nuovi visitatori del tuo sito web perché permettono all’utente di conoscere lo scopo delle icone e dei link posizionandovi sopra il puntatore del mouse.

Passo 1: Aggiungere il Markup Tooltip

Per creare un tooltip, devi aggiungere l’attributo data-toggle="tooltip" a un elemento. Il testo del tolltip che verrebbe visualizzato su hover può essere specificato usando l’attributo title.

Qui c’è il markup standard per aggiungere un tolltip a un collegamento ipertestuale.

<a href=”#” data-toggle=”tooltip” title=”Some text”>Hover over me</a>

Similmente, potete aggiungere tooltip agli altri elementi come pulsanti, icone, ecc.

Nota: Per ragioni di performance i data-apis tooltip sono opt in, significa che per usare i tooltip devi inizializzarli tu stesso con il metodo tooltip().

Step 2: Attivare i tooltip

I tooltip possono essere attivati via JavaScript – basta chiamare il metodo tooltip() Bootstrap con il id, class o qualsiasi selettore CSS dell’elemento di destinazione nel tuo codice JavaScript.

Puoi inizializzare i tooltip individualmente o tutti insieme. Il seguente codice jQuery inizializzerà tutti i tooltip su una pagina selezionandoli con il loro attributo data-toggle.

Esempio

Prova questo codice ” 

<script>$(document).ready(function(){ $('').tooltip(); });</script>

– L’output dell’esempio precedente sarà simile a questo:

Impostazione delle direzioni dei tooltip

Puoi impostare i tooltip per apparire sui lati superiore, destro, inferiore e sinistro di un elemento.

Posizionamento dei tooltip tramite gli attributi di dati

L’esempio seguente ti mostra come impostare la direzione dei tooltip tramite gli attributi di dati.

Posizionamento dei Tooltips via JavaScript

Il seguente esempio ti mostrerà come impostare la direzione dei tooltips via JavaScript.

Opzioni

Ci sono alcune opzioni che possono essere passate al metodo tooltip() Bootstrap per personalizzare la funzionalità del plugin tooltip.

Nome Tipo Valore predefinito Descrizione
animazione booleano vero Applica una transizione CSS di dissolvenza al tooltip.
html booleano falso Inserisce l’html nel tooltip. Se falso, il metodo text() di jQuery sarà usato per inserire il contenuto nel DOM. Usa il testo se sei preoccupato degli attacchi XSS.
placement stringa | funzione ‘top’ Imposta la posizione del tooltip – top | bottom | left | right | auto. Quando viene specificato il valore “auto”, riorienterà dinamicamente il tooltip.
selettore stringa falso Se viene fornito un selettore, gli oggetti tooltip saranno attaccati ai target specificati.
title stringa | funzione ” Imposta il valore predefinito title se l’attributo title non è presente.
trigger stringa ‘hover focus’ Specifica come viene attivato il tooltip – click | hover | focus | manuale. Si noti che si possono passare più tipi di trigger, separati da uno spazio.
delay numero | oggetto 0

Tempo di ritardo nel mostrare e nascondere il tooltip (ms) – non si applica al tipo di trigger manuale.

Se viene fornito un numero, il ritardo viene applicato sia a nascondere/mostrare La struttura dell’oggetto è:
delay: { show: 500, hide: 100 }
container stringa | false false Applica il tooltip ad un elemento specifico container: 'body'
template stringa

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

HTML di base da usare per creare il tooltip. Il titolo del tooltip sarà inserito nell’elemento con la classe .tooltip-inner e l’elemento con la classe .tooltip-arrow diventerà la freccia del tooltip.

L’elemento wrapper più esterno dovrebbe avere la classe .tooltip.
viewport stringa | oggetto { selector: 'body', padding: 0 } Tiene il tooltip entro i limiti di questo elemento. Esempio: viewport: '#viewport' o { selector: '#viewport', padding: 0 }
offset numero | stringa 0 Offset del tooltip rispetto al suo obiettivo.
fallbackPlacement stringa | array ‘flip’ Consente di specificare quale posizione Popper userà in fallback.
boundary stringa | elemento ‘scrollParent’ Fine del vincolo di overflow del tooltip. Accetta i valori di 'viewport', 'window', 'scrollParent', o un riferimento HTMLElement (solo JavaScript).
sanitize boolean true Abilita o disabilita la sanitizzazione. Se attivata le opzioni ‘template’ e ‘title’ saranno sanificate.
whiteList object value Oggetto che contiene attributi e tag consentiti.
sanitizeFn null | function null Consente di specificare la propria funzione di sanitizzazione.

È possibile impostare queste opzioni sia attraverso l’uso di attributi dati o JavaScript. Per impostare le opzioni dei tooltip tramite gli attributi di dati, basta aggiungere il nome dell’opzione a data- insieme al valore corretto, come data-animation="false", data-placement="bottom" ecc.

Tuttavia, JavaScript è il modo più preferibile per impostare queste opzioni poiché evita un lavoro ripetitivo. Vedi il metodo tooltip $().tooltip(options) nella sezione sottostante per sapere come impostare le opzioni per i tooltip usando il JavaScript.

Metodi

Questi sono i metodi standard di Bootstrap per i tooltip:

$().tooltip(options)

Questo metodo attacca il gestore del tooltip ad un gruppo di elementi. Permette anche di impostare le opzioni per i tooltip, in modo da poterli personalizzare secondo le proprie esigenze.

L’esempio seguente inserirà il testo specificato all’interno dei tooltip se il valore dell’attributo title è omesso o mancante negli elementi selezionati:

L’esempio seguente vi mostrerà come posizionare il contenuto HTML all’interno di un tooltip:

L’esempio seguente vi mostrerà come controllare i tempi di visualizzazione e nascondimento del tooltip utilizzando l’opzione delay del tooltip tramite JavaScript.

L’esempio seguente vi mostrerà come potete creare il vostro modello personalizzato per i tooltip di Bootstrap invece di usare quello predefinito.

L’esempio seguente inserirà il codice HTML generato dinamicamente del tooltip alla fine di un elemento .wrapper invece dell’elemento <body>.

Nota: sovrascrivere il valore predefinito dell’opzione container del tooltip non produce alcuna differenza visibile nella pagina. Per vedere il risultato effettivo è necessario ispezionare il DOM risultante utilizzando gli strumenti Firebug o Developer.

Similmente, è possibile impostare altre opzioni per i tooltip utilizzando il metodo $().tooltip(options). Controlliamo gli altri metodi del plugin Bootstrap tooltip.

.tooltip(‘show’)

Questo metodo rivela il tooltip di un elemento.

Esempio

Prova questo codice ” 

<script>$(document).ready(function(){ $(".show-tooltip").click(function(){ $("#myTooltip").tooltip('show'); }); });</script>

.tooltip(‘hide’)

Questo metodo nasconde il tooltip di un elemento.

Example

Prova questo codice ” 

<script>$(document).ready(function(){ $(".hide-tooltip").click(function(){ $("#myTooltip").tooltip('hide'); }); });</script>

.tooltip(‘toggle’)

Questo metodo alterna il tooltip di un elemento.

Example

Prova questo codice ” 

<script>$(document).ready(function(){ $(".toggle-tooltip").click(function(){ $("#myTooltip").tooltip('toggle'); }); });</script>

.tooltip(‘dispose’)

Questo metodo nasconde e distrugge il tooltip di un elemento.

.tooltip(‘enable’)

Questo metodo dà al tooltip di un elemento la possibilità di essere mostrato. I tooltip sono abilitati per default.

Esempio

Prova questo codice ” 

<script>$(document).ready(function(){ $(".enable-tooltip").click(function(){ $("#myTooltip").tooltip('enable'); }); });</script>

.tooltip(‘disable’)

Questo metodo rimuove la possibilità che il tooltip di un elemento sia mostrato. Il tooltip potrà essere mostrato solo se riabilitato.

.tooltip(‘toggleEnabled’)

Questo metodo alterna la possibilità che il tooltip di un elemento sia mostrato o nascosto.

.tooltip(‘update’)

Questo metodo aggiorna la posizione del tooltip di un elemento.

Esempio

Prova questo codice ” 

<script>$(document).ready(function(){ $(".update-tooltip").click(function(){ $("#myTooltip").tooltip('update'); }); });</script>

Eventi

La classe tooltip di Bootstrap include pochi eventi per agganciare la funzionalità tooltip.

Evento Descrizione
show.bs.tooltip Questo evento scatta immediatamente quando viene chiamato il metodo di istanza show.
shown.bs.tooltip Questo evento viene sparato quando il tooltip è stato reso visibile all’utente. Attenderà che il processo di transizione CSS sia stato completamente completato prima di essere sparato.
hide.bs.tooltip Questo evento viene sparato immediatamente quando il metodo di istanza hide è stato chiamato.
hidden.bs.tooltip Questo evento viene sparato quando il tooltip ha finito di essere nascosto all’utente. Aspetterà che il processo di transizione CSS sia stato completamente completato prima di essere sparato.
inserito.bs.tooltip Questo evento viene sparato dopo l’evento show.bs.tooltip quando il template tooltip è stato aggiunto al DOM.

L’esempio seguente mostrerà un messaggio di avviso all’utente quando la transizione di dissolvenza del tooltip è stata completamente completata.

Previsioni