Tooltip

Versione per Internet Explorer 4.0 o superiore

Un tooltip è una finestra a comparsa, associata ad una parola o ad una frase, contenente un messaggio di aiuto o spiegazione, che appare quando il puntatore del mouse passa sopra tale parola o frase.
In questo esempio, il tooltip viene realizzato utilizzando il modello di documento (DOM, Document Objet Model) di Internet Explorer 4.0 (e versioni successive) controllato da uno script in JavaScript.

In particolare, il DOM di Explorer consente di modificare l'attributo di visibilità della finestra tooltip, realizzata attraverso una tabella di una riga, mentre l'evento generato dal mouse quando "passa sopra" una parola chiave viene intercettato e gestito da uno script in JavaScript.

In pratica, per includere tooltip in un documento HTML occorre seguire i seguenti passi:

Visualizzare il sorgente del documento HTML
Includere, in testa al file, tra il tag </HEAD> e <BODY> le seguenti righe:

<STYLE TYPE="text/css">
<!--
.UStyle { text-decoration : "none"; color:"red"}
.cardHide,.cardShow { color : "yellow"; background : "black"; position:absolute; }
.cardHide { visibility:"hidden"  }
.cardShow { visibility:"visible" }
// -->
</STYLE>

<SCRIPT language="JavaScript">
<!--
var contaTooltip = 1;

function showHelp (thisLayer) {
  document.all(thisLayer).className = "cardShow";
}
function clearHelp (thisLayer) {
  document.all(thisLayer).className  = "cardHide";
}
function addTooltip(testo,commento) {
 document.writeln("<U OnMouseOver=showHelp('id"+contaTooltip+"') OnMouseOut=clearHelp('id"+contaTooltip+"')>"+testo+"</U>");
 document.writeln("<TABLE BORDER=3 ID='id"+contaTooltip+"' CLASS='cardHide'>");
 document.writeln("<TD>"+commento+"</TD>");
 document.writeln("</TABLE>");
 contaTooltip++;
}
// -->
</SCRIPT>

Nel testo del documento, per ogni parola chiave di cui si desidera associare una finestra a comparsa, sostituirla con:

<SCRIPT>addTooltip("parola","definizione")</SCRIPT>

ad esempio:

<SCRIPT>addTooltip("UFO","Oggetto non identificato")</SCRIPT>

Personalizzare il tooltip

La finestra a comparsa è stata scelta di colore giallo su sfondo nero mentre la parola chiave è di colore rosso.
Per scegliere altri colori modificare, nel punto 2, le seguenti righe:

.UStyle { text-decoration:"none"; color:"colore parola chiave"}
.cardHide,.cardShow { color : "colore sfondo tooltip";
   background : "colore sfondo tooltip"; position:absolute; }

Dove il colore deve essere specificato in formato RGB (ad esempio "#0000FF" per il blu) oppure utilizzando nomi di costanti predefinite( ad esempio "red" , "blue", "yellow", "green", ...)

Esempio

Ecco esempi di tooltip applicato ai versi dell'Odissea:

, quell'uom di multiforme ingegno
dimmi, che molto errò, poi ch'ebbbe a terra
gittate d' le sacre torri;
che città vide molte, e delle genti
l'indol conobbe; che
molti dentro del cor sofferse affanni,
mentre a guardar la cara vita intende,
e i suoi compagni a : ma indarno
ricondur desiava i suoi compagni,
ch&eacuto; delle colpe lor tutti

Back

Sommario