Foundation - Riferimento JavaScript Tooltip

Descrizione

Foundation fornisce componenti JavaScript per il suggerimento come elencato di seguito.

Inizializzazione

Per utilizzare questo plugin, i file foundation.core.js , foundation.tooltip.js dovrebbero essere inclusi nel tuo JavaScript. Questo plugin richiede le seguenti librerie di utilità:

  • foundation.util.box.js

  • foundation.util.triggers.js

Foundation.Tooltip

Crea una nuova istanza di tooltip.

var elem = new Foundation.Tooltip(element);

Attiva l' evento Tooltip #: init events e accetta i seguenti parametri.

Sr.No. Nome e descrizione genere
1

element

È l'oggetto jQuery utilizzato per allegare un suggerimento a.

 jQuery
2

options

Per estendere la configurazione predefinita viene utilizzato questo oggetto.

 Oggetto

Opzioni plugin

Puoi usarli per personalizzare l'istanza di una descrizione comando. Può essere impostato come attributi di dati separati, un attributo di opzioni dati unito o come un oggetto passato al costruttore del plugin. La tabella seguente elenca le opzioni del plugin utilizzate in Foundation.

Sr.No. Nome e descrizione Esempio
1

hoverDelay

Rappresenta il tempo in ms, da prendere prima che un tooltip debba aprirsi al passaggio del mouse.

 200
2

fadeInDuration150

Rappresenta il momento di svanire in vista.

 150
3

fadeOutDuration

Rappresenta il momento di svanire dalla vista.

 150
4

disableHover

Disabilita gli eventi al passaggio del mouse dall'apertura del suggerimento quando impostato su true.

 falso
5

templateClasses

Classi aggiuntive da applicare al modello di descrizione comando, che è facoltativo.

 'my-cool-tip-class'
6

tooltipClass

Classe non facoltativa aggiunta ai modelli del suggerimento.

 "descrizione comando"
7

triggerClass

Classe applicata all'elemento di ancoraggio del tooltip.

 'has-tip'
8

showOn

Dimensione minima del punto di interruzione in corrispondenza della quale aprire la descrizione comando.

 'piccolo'
9

template

Modello personalizzato da utilizzare per creare markup dei suggerimenti.

 ''
10

tipText

Testo emesso nel modello di descrizione comando all'apertura.

 "Alcuni fatti interessanti sullo spazio qui."
11

clickOpen

Apre la descrizione comando quando viene attivato con un evento clic o tocco.

 vero
12

positionClass

Classi aggiuntive per il posizionamento, impostate da JS.

 'superiore'
13

vOffset

Rappresenta la distanza (pixel) in cui il modello deve spingere dall'ancoraggio sull'asse Y.

 10
14

hOffset

Rappresenta la distanza (pixel) in cui il modello deve spingere dall'ancoraggio sull'asse X, quando allineato di lato.

 12

Eventi

Questi eventi verranno attivati ​​da qualsiasi elemento con il plug-in dei suggerimenti allegato. La tabella seguente elenca gli eventi con una breve descrizione.

Sr.No. Nome e descrizione
1

tooltip.zf.tooltips

Attiva la chiusura di tutte le altre descrizioni comandi aperte nella pagina.
2

show.zf.tooltips

Si attiva quando viene visualizzato il suggerimento.
3

hide.zf.tooltips

Si attiva quando la descrizione comando è nascosta.

Funzioni

.spettacolo

Rivela il suggerimento e attiva un evento per chiudere un altro suggerimento. Si innesca l' # evento Closeme: tooltip Tooltip # Evento: Mostra eventi.

.nascondere

Nasconde il tooltip attuale e azzera la classe di posizionamento quando cambia a causa della collisione. Attiva l' evento Tooltip #: nascondi eventi.

.toggle

Oltre alle funzioni statiche show () e hide (), .toggle aggiunge un metodo toggle.

.distruggere

Distrugge un'istanza di tooltip e l'elemento del modello viene rimosso dalla vista.