Mostrare dei tooltip in stile cartoon al passaggio del mouse.

Come realizzare dei tooltip personalizzati da inserire in qualsiasi pagina web anche se il tutorial prende in esame solo un sito su Blogger.

I tooltip sono quelle informazioni aggiuntive che vengono visualizzate sopra a un elemento quando venga puntato dal cursore. Nell'HTML c'è un tag specifico per creare i tooltip che è il seguente 

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

in cui basta digitare il testo da visualizzare e quello dei tooltip. Questo metodo di inserimento dei tooltip è molto semplice ma anche poco interessante dal punto di vista estetico visto che il testo del tooltip si mostrerà al passaggio del cursore in un rettangolo grigio di scarso effetto grafico

Naturalmente usando i CSS si possono creare dei tooltip molto più sofisticati. Andiamo su Modello > Modifica HTML, cerchiamo con Ctrl+F la riga  ]]></b:skin> e subito sopra incolliamo

a.tooltip1 { /* Aspetto testo visualizzato */
position: relative;
z-index: 9;
cursor: help;
text-decoration: underline;
}
a.tooltip1:hover {z-index: 99; text-decoration: none;}
a.tooltip1 span {display: none}
a.tooltip1:hover span { /* Stile del tooltip */
display: block;
position: absolute;
top: 1.5em; left: 1.5em;
width: 14em;
border: 1px solid #1df;
background: #EDE1F9;
color: #111;
text-align: center;
}

Nei post basterà andare in Modalità HTML e incollare questo codice

<a class="tooltip1">Testo visualizzato<span>Testo del tooltip che si visualizzerà al passaggio del cursore.</span></a>

per ottenere un tooltip con questo aspetto

Il cursore prenderà l'aspetto di un punto interrogativo vista la presenza del tag cursor: help.  Si può scegliere un altro aspetto modificando tale parametro. Al posto di help possiamo scegliere tra questi valori: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help che portano a questo risultato

Oltre ai codici dei colori e allo stile dei bordi per il tooltip è importante il posizionamento con top: 1.5em; left: 1.5em; che lo mette in basso a destra. Con bottom: 1.5em; left: 1.5em; avremo

Possono essere settati i valori di 1.5em per trovare le giuste distanze (p.e. 1.8em oppure 2em). La larghezza del tooltip è data da width: 14em; e significa che è 14 volte la dimensione dei caratteri.

TOOLTIP IN STILE FUMETTO

 

Possiamo anche usare delle immagini di sfondo per la realizzazione di tooltip che ricordino i cartoon. Anche in questo caso si deve andare su Modello > Modifica HTML e si cerca la riga ]]></b:skin> quindi subito sopra a questa dovremo incollare un apposito CSS. Ne ho preparati tre

1. CSS per i tooltip con sfondo verde (classe tt1)-
2. CSS per i tooltip con sfondo rosa (classe tt2)-
3. CSS per i tooltip con sfondo celeste (classe tt3)-

Nei codici precedenti si possono personalizzare i parametri come illustrato in precedenza

Vista la direzione del fumetto il tooltip si visualizzerà in basso rispetto al testo. Per inserire il tooltip nei contenuti di un post dobbiamo andare il modalità HTML e incollare questo codice

 

<a href="#" class="ttX">testo visualizzato<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>

dove opzionalmente può essere inserito un URL di un collegamento al posto del cancelletto (#).  Dopo aver digitato il testo visualizzato e quello del tooltip si deve scegliere la classe da mettere al posto di ttX e che sarà tt1 per il tooltip verde, tt2 per il tooltip rosa e tt3 per il tooltip celeste. 

Concludo ricordando che questi tooltip possono essere inseriti in una qualsiasi pagina web racchiudendo il codice CSS tra i tag <style> e </style> per poi incollarlo sopra a </head> che è un tag fondamentale dell'HTML e che è presente in tutte le pagine web.