In questo articolo vedremo come creare dei tooltips con uno dei plugin ufficiali offerti da MooTools: Tips.js. Ricordo che, come specificato nella stessa documentazione ufficiale della libreria, alla base di Tips.js c'è l'idea sviluppata da Alessandro Fulciniti in Bubble Tooltips (qui l'articolo in italiano pubblicato su HTML.it).
File richiesti per gli esempi
Come accennato nell'articolo Introduzione a MooTools, a differenza di altri framework, MooTools non obbliga a scaricare l'intera libreria, ma permette di scegliere i componenti richiesti per una determinata applicazione.
Gli esempi mostrati in questo articolo richiedono i seguenti file (che possono essere scaricati dalla pagina del download):
- Core.js, Class.js e Class.Extras.js;
- tutti i componenti della sezione Native (Array.js, Function.js, String.js, Element.js, Number.js);
- Element.Event.js della sezione Element;
- window.size.js della sezione Window;
- Tips.js della sezione Plugins.
Primo esempio
I tooltips vengono creati utilizzando il costruttore Tips. Esso accetta due parametri:
- una collezione di elementi alla quale applicare i tooltips (selezionata con la funzione
$$); - un oggetto che rappresenta le opzioni del tooltip.
Una caratteristica fondamentale dei tooltips creati con MooTools che può trarre in errore è l'opzione denominata 'className'. Essa non si riferisce al nome della classe dell'elemento su cui si vuole fare apparire il tooltip, ma è un prefisso che viene aggiunto al nome delle classi CSS che compongono il tooltip.
Esso infatti è composto da tre sezioni:
- il tool-title (che è il titolo del tooltip);
- il tool-tip (che è il corpo del tooltip);
- il tool-text (che è il testo del tooltip).
Se l'opzione className è impostata al valore 'tool1', allora, le sezioni del tooltip avranno i seguenti valori per gli attributi class:
- tool-title: '
tool1-title'; - tool-tip: '
tool1-tip'; - tool-text: '
tool1-text'.
Il prefisso di default è 'tool', ma vi consiglio di modificarlo sempre per non sovrapporre i valori delle classi.
In questo primo esempio vedremo come creare un normale tooltip che appare quando passiamo il mouse sull'immagine che ha 'tooltip1' come valore dell'attributo class:
var tip1 = new Tips($$('.tooltip1'), {
className: 'tool1'
});
Al costruttore Tips abbiamo passato l'elemento con class uguale a 'tooltip1' e un oggetto contenente il prefisso delle classi, ovvero 'tool1'.
Nella parte HTML dobbiamo impostare il tag dell'immagine sulla quale apparirà il tooltip, così:
<img class="tooltip1" src="1.jpg" alt="" title="Tooltip 1 :: Un Paesaggio" />
Essa avrà 'tooltip1' come valore di class. Per impostare il titolo e la descrizione del tooltip è poi necessario specificare l'attributo title dell'elemento e separare le sezioni con i doppi due punti ': :'. La parte a sinistra sarà il titolo, la parte a destra la descrizione.
Nella parte CSS dobbiamo impostare due stili:
- uno per la classe '
tool1-title' che rappresenta gli stili del titolo del nostro tooltip; - uno per la classe '
tool1-tip' che rappresenta il corpo del nostro tooltip.
Ecco il codice:
.tool1-title {
background-color:#CCCCCC;
color:#FFFFFF;
width:200px;
border-right:2px solid #999999;
border-bottom:2px solid #999999;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
.tool1-tip {
background-color:#E8E8E8;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
padding-bottom:4px;
}
A questo punto non ci resta che richiamare il costruttore Tips visto in precedenza al caricamento della pagina:
window.addEvent('load', function() {
var tip1 = new Tips($$('.tooltip1'), {
className: 'tool1'
});
});
L'esempio è completo: basta passare il mouse sull'immagine e il tooltip comparirà seguendo il movimento del mouse.
Secondo esempio: personalizzare il tooltip
Con MooTools è possibile specificare diversi stili e modalità di comportamento per i tooltips: ad esempio l'attesa che intercorre tra il momento in cui l'utente passa il mouse sull'elemento e quello in cui il tooltip compare; o, viceversa, il ritardo con cui deve scomparire.
Questi ed altri parametri devono essere specificati nel secondo argomento del costruttore Tips, ovvero l'oggetto che rappresenta le sue opzioni. Vediamoli:
- maxTitleChars indica il numero massimo di caratteri che possono comparire nel tooltip;
- showDelay è il ritardo in ms con cui deve apparire il tooltip;
- hideDelay è il ritardo in ms con cui deve scomparire;
- className è il prefisso visto in precedenza;
- offsets è un oggetto con proprietà x e y che rappresentano la distanza dall'angolo superiore sinistro del tooltip al puntatore del mouse;
- fixed è un parametro boolean: se è impostato su
trueil tooltip non segue i movimenti del nostro mouse.
Il costruttore Tips permette inoltre di specificare due eventi personalizzati:
- onShow, che scatta quando appare il tooltip;
- onHide, che scatta quando scompare il tooltip.
Vengono utilizzati solitamente per creare effetti al momento della comparsa/scomparsa del tooltip.
In questo secondo esempio vedremo come creare un tooltip su di un'immagine con effetto fade.
Per creare questo tipo di effetto bisogna impostare nelle opzioni gli eventi onShow e onHide; ad entrambe queste funzioni viene passato come argomento un oggetto che rappresenta il tooltip: noi lo useremo per creare un Fx.Style che cambia il valore di opacità del tooltip da 1 a 0 quando viene mostrato, e da 0 a 1 quando viene rimosso. Vediamo il codice:
window.addEvent('load', function() {
var tip2 = new Tips($$('.tooltip2'), {
initialize: function() {
this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
},
className: 'tool2',
onShow: function(tip) {
this.fx.start(1);
},
onHide: function(tip) {
this.fx.start(0);
}
});
});
Il metodo start dell'oggetto Fx.Style cambia il valore della proprietà 'opacity' sia alla comparsa sia alla scomparsa del tooltip (sull'immagine con class 'tooltip2'): si ottiene cosi l'effetto fade desiderato.
Questa è la parte HTML che rappresenta l'immagine (abbiamo dato uno stile alle sezioni del tooltip come in precedenza impostando delle regole CSS apposite):
<img class="tooltip2" src="2.jpg" alt="" title="La Terra :: La formazione della Terra è datata circa 4.57
miliardi di anni fa. La Terra possiede un solo satellite naturale, la Luna,
che ha iniziato ad orbitare intorno ad essa circa 4.53 miliardi di anni fa..." />
Terzo esempio: fixed tooltip
L'ultimo esempio sull'uso dei tooltips mostra come realizzare un tooltip fisso su di un'immagine.
Anche se l'utente trascina il mouse all'interno di questa immagine il tooltip rimarrà ancorato alla sua posizione iniziale.
Per creare un effetto di questo genere è necessario impostare a true il valore dell'opzione fixed nel secondo argomento del costruttore Tips:
var tip2 = new Tips($$('.tooltip2'), {
className: 'tool2',
fixed:true
});
La parte HTML è esattamente la stessa dell'esempio precedente, poiché l'unica differenza è la posizione fissa del tooltip.
Conclusione
In questo articolo abbiamo visto come funziona il costruttore Tips e tre esempi pratici che mostrano il risultato che si può ottenere sfruttando le opzioni di personalizzazione. Tutti gli esempi sono disponibii per il download.
