I tooltip sono i piccoli box gialli con testo nero che compaiono, navigando sul web, quando si passa con il mouse, in genere, su un link o su un'immagine.
Se utilizzati con criterio sono un ottimo ausilio alla navigazione: consentono, ad esempio, di comunicare informazioni aggiuntive sulla destinazione di un link o su un elemento grafico. Perchè l'utente possa fruirne, c'è però bisogno di rispettare alcuni prerequisiti. Quello fondamentale consiste nell'utilizzo dell'attributo title. Se per esempio costruisco un link di questo tipo
<a href="http://www.html.it" title="Il portale italiano del web publishing">HTML.it</a>
quando l'utente passa con il mouse sopra di esso, visualizzerà il testo 'Il portale italiano del web publishing' in forma di tooltip. In genere, è buona norma aggiungere altri dettagli, informando l'utente sulla destinazione del link (nuova finestra o stessa finestra) o sulla lingua del sito collegato.
Lo script che presentiamo sfrutta la potenza dei CSS e di Javascript, combinati, per dare un tocco di stile ai tooltip, dicendo addio alla classica combinazione sfondo giallo con testo nero che è quella di default.
- esempio.htm
- tooltip.css
- tooltip.js
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
## 1: LA SEZIONE head
All'interno della sezione head, devi prendere in considerazione due semplici istruzioni.
La prima è quella con cui importiamo nella pagina il foglio di stile che gestisce l'aspetto del tooltip:
<style type="text/css">
@import "tooltip.css";
</style>
Attenzione! Affinchè lo script funzioni è necessario importare il CSS con il metodo visto qui sopra (regola @import).
La seconda istruzione fondamentale è quella con cui importiamo lo script esterno tooltip.js:
<script src="tooltip.js" type="text/javascript" language="javascript"></script>
