Come creare dei tooltip personalizzati a forma di fumetto.

Ricordo che il tooltip è un piccolo popup che si visualizza nel momento si passa con il mouse sopra a una parola specifica. C'è un sistema molto semplice per crearlo attraverso questo codice da inserire nell'articolo in modalità HTML

<abbr title="TESTO DEL TOOLTIP">TESTO VISUALIZZATO</abbr>

Questo è un modo utile per aggiungere una descrizione a una particolare espressione o frase: uso del tooltip per i blogger. Se si vuole una maggiore personalizzazione di questa funzionalità bisogna creare dei CSS da aggiungere al modello. Si va su Design > Modifica HTML e si salva il modello completo. Si cerca la riga ]]></b:skin> che denota la fine delle classi di stile del modello e subito sopra si può incollare uno dei seguenti tre codici.

1. CSS tooltip numero 1 con sfondo verde -
2. CSS tooltip numero 2 con sfondo rosa -
3. CSS tooltip numero 3 con sfondo celeste -

Si salva il modello. Si può vedere il funzionamento di ciascuno accedendo al post demo dei tooltip personalizzati.

Nello screenshot precedente si vedono i tre stili di tooltip che sono stati proposti. Si tratta di tooltip che hanno la forma di fumetto e che si adattano come dimensioni a quelle della lunghezza della descrizione. La sintassi per inserire un tooltip è la seguente

<a href="#" class="ttX">testo che ha il tooltip<span class="tooltip"><span class="top"></span><span class="middle">Descrizione che sarà visualizzata all'interno della finestra del tooltip</span><span class="bottom"></span></span></a>

Nel collegamento si può lasciare il cancelletto ( # ) se non si vuole inserire alcun link oppure può essere incollato l'URL di una pagina. In questo caso la descrizione potrebbe essere proprio una anteprima di quello che troverà il visitatore se ci clicca sopra. Quando si scriverà il post, nell'editor non apparirà quello che invece sarà visto nel post che poi si pubblicherà ma sarà visualizzata per intero anche la descrizione del tooltip.

Il dato fondamentale è quello della classe indicata genericamente con ttX. Dovrà essere inserito

1. class="tt1" per lo stile numero 1
2. class="tt2" per lo stile numero 2
3. class="tt3" per lo stile numero 3

Si possono incollare anche tutti i tre i codici nel template, uno di seguito all'altro, e poi scegliere di volta in volta quale stile di tooltip utilizzare. L'idea di questa personalizzazione e le immagini per il codice le ho prese da Ciudad Blogger.