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
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>
