Come inserire dei semplici tooltip in un articolo.

Il tooltip è una sorta di fumetto che appare sopra a una parola o una porzione di testo quando questo viene puntato con il mouse. E' una opzione che serve ai blogger per dare ulteriori informazioni senza appesantire troppo l'articolo. Penso a un blog che si occupa di eventi e che potrebbe semplicemente elencarli mentre passandoci sopra con il mouse si potrebbe conoscere anche il luogo, la data e l'ora di ciascuno di essi.

Direi che l'esempio che ho fatto è anche troppo limitativo rispetto alla grande potenzialità di questo strumento. Ho già presentato il codice di un semplice tooltip

<abbr title="TESTO VISUALIZZATO NELLA FINESTRA DEL TOOLTIP">TESTO VISIBILE NELLA PAGINA</abbr>

che apre una piccola finestra con sfondo grigio quando ci si passa sopra con il mouse: ESEMPIO DI SEMPLICE TOOLTIP. Ho anche già illustrato come si possono creare dei tooltip a forma di fumetto utilizzando delle particolari immagini di sfondo. Questo post vuole essere una via di mezzo cioè presentare un tooltip che non ha bisogno di immagini ma che può essere personalizzato nello stile dei bordi, nel colore del testo e nel colore di sfondo. Ecco il codice che dovrà essere incollato andando su Modello > Modifica HTML > Procedi subito sopra la riga ]]></b:skin>

a.tooltip { /* Stile del testo del tooltip */
position: relative;
z-index: 24;
cursor: help;
text-decoration: underline;
}
a.tooltip:hover {z-index: 25; text-decoration: none;}
a.tooltip span {display: none}
a.tooltip:hover span { /* Stile della descrizione */
display: block;
position: absolute;
top: 2em; left: 2em;
width: 16em;
border: 1px solid #940F04; /* Stile del bordo */
background: #FFEAE9;
color: #003366;
text-align: center;
}

In subordine si può aggiungere il tag <style> all'inizio e </style> alla fine del codice e incollarlo sopra alla riga </head>. Le personalizzazioni riguardano lo stile del testo del tooltip che sarà sottolineato (underline) e con il cursore che sarà visto a forma di punto interrogativo. Si può anche configurare lo stile della descrizione mediante la posizione e la larghezza del tooltip. Il tag em rappresenta la dimensione dei caratteri del blog quindi si tratta di valori che sono correlati a questo parametro. Oltre allo stile del bordo si possono anche scegliere il colore dello sfondo, il colore del testo e il suo allineamento (left,right o center). I meno esperti possono consultare il post sui codici dei colori. Ho pubblicato in rete una Demo di un tooltip eseguita con questo sistema.

Quando si vuole creare un tooltip basta andare in modalità HTML nell'Editor di Blogger o su Windows Live Writer e incollare un codice come questo

<a class="tooltip">Testo nel post<span>Messaggio visualizzato nel tooltip</span></a>

dove la scritta in blu si visualizzerà normalmente e quella in rosso si vedrà nel rettangolo del tooltip che si aprirà al passaggio del mouse.