Il tutorial di questa settimana è dedicato alla tecnica dei tooltip a fumetto sviluppata originariamente sul sito Dhtmlgoodies.com.
Ricordo che un tooltip è un box con testo che compare passando con il mouse sopra un elemento, testo o immagine che sia. Un tooltip, è per esempio, il boxino giallo associato all'uso dell'attributo title nel codice HTML.
I tooltip di Dhtmlgoodies hanno la particolarità di essere visualizzati nella classica forma del fumetto (bubble o balloon in inglese). L'implementazione è molto semplice. Partiamo dall'esempio.
Troverete questa pagina di demo all'interno del file bubble_dl.zip. Ecco cosa contiene:
- esempio.html - la demo;
- bubble.css - il foglio di stile per la formattazione dei tootip;
- bubble.js - il Javascript che gestisce la comparsa e la scomparsa dei tooltip;
- bubble_top.gif, bubble_middle.gif, bubble_bottom.gif - le 3 immagini GIF usate nella costruzione del fumetto/tooltip.
Il primo passo consiste nel collegare alla nostra pagina il CSS e il Javascript:
<link rel="stylesheet" type="text/css" href="bubble.css" />
<script type="text/javascript" src="bubble.js"></script>
Per l'uso che dobbiamo farne possono essere lasciati intatti entrambi. L'importante è utilizzare, nella parte HTML, gli stessi id usati in questo tutorial, poiché a tali id si fa riferimento nello script e nel foglio di stile.
Passando alla parte HTML, andiamo a soffermarci sulla sezione di codice forse più importante:
<div id="bubble_tooltip">
<div class="bubble_top"><span></span></div>
<div class="bubble_middle"><span id="bubble_tooltip_content">Contenuto del div.</span></div>
<div class="bubble_bottom"></div>
</div>
Definisce i div su cui si fonda la costruzione dei tooltip. Questi div sono resi invisibili al caricamento della pagina con il CSS e sono visualizzati solo quando si attiva lo script. Questa sezione di codice va copiata e incollata così com'è in un punto qualunque della sezione <body> </body> della pagina. Personalmente, non essendo una sezione rilevante per i contenuti, consiglio di metterla in fondo, magari prima del tag di chiusura </body>.
Non resta che impostare le parole su cui attiveremo i tooltip. Si tratta di link così concepiti:
<p>Ecco un <a href="#" onmousemove="showToolTip(event,'Testo del tooltip...');return false"
onmouseout="hideToolTip()">esempio</a> di tooltip a fumetto.</p>
L'attributo href prende nell'esempio il simbolo di link vuoto (#), ma può essere un link vero e proprio.
Segue l'evento onmousemove. Richiama la funzione showToolTip con due parametri. Il primo è la parola chiave event. Il secondo, da racchiudere tra apici singoli, è il testo che sarà visualizzato nel tooltip.
Per chiudere, dopo return false, l'evento onmouseout, che richiama la funzione hideToolTip, quella che nasconde il tooltip quando il mouse si sposta lontano dalla parola.
