Come mostrare un tooltip con descrizione sopra le immagini al passaggio del mouse.

Come visualizzare un tooltip colorato con font e colori personalizzati al passaggio del cursore sopra le immagini.

Quando si passa con il cursore sopra una immagine ci viene mostrato il testo contenuto all'interno del tag Title che insieme all'altro tag Alt serve per rendere l'immagine più descrittiva aggiungendo un testo pertinente a beneficio dei lettori e dei motori di ricerca.

Il tooltip visualizzato in questo modo è esteticamente poco valido e non si presta a mostrare delle descrizioni troppo lunghe. Vediamo come risolvere il problema e come mostrare al passaggio del cursore un tooltip completamente personalizzato nella posizione, nel colore, nella trasparenza, nella famiglia di font, nello sfondo e in altri parametri.

MOSTRARE UN TOOLTIP DESCRITTIVO SOPRA A UNA IMMAGINE

Per introdurre questa funzionalità a una singola immagine dobbiamo aprire l'Editor del post o della pagina statica e incollare questo codice

<style type="text/css">
.imm-tooltip {
position: relative;
margin: 10px auto;
}
.imm-tooltip img {
width:400px; /* Larghezza immagine */
border:1px dashed #036; /* Bordo immagine */
background-color:lightyellow; /* Colore sfondo immagine */
padding:5px; /* Spessore sfondo immagine */
}
.tooltip { /* Stile del testo*/
position: absolute;
width:320px; /* Larghezza tooltip */
font-size:15px; /* Dimensione font */
font-family: Georgia; /* Famiglia dei caratteri */
top: 5%;
left: 2%; /* Posizionamento inizio del tooltip*/
filter: alpha(opacity=0);
opacity: 0;
padding: 6px;
text-align:justify; /* Testo giustificato */
color: #fff; /* Colore testo tooltip */
background: black; /* Sfondo tooltip */
-moz-transition:all ease .5s; /* Durata Transizione*/
-webkit-transition:all ease .5s ;
transition:all ease .5s;
}
.imm-tooltip:hover .tooltip {
filter: alpha(opacity=70);
opacity: .7; /* Trasparenza al passaggio del mouse */
}
</style>
<div class="imm-tooltip"><a href="#"><img src="URL_IMMAGINE" alt="nome-immagine" /><span class="tooltip">TESTO DEL TOOLTIP </span></a></div>

Ho inserito dei commenti colorati di verde, che tra l'altro possono anche essere tolti, per illustrare il significato della maggior parte dei parametri. I meno esperti possono consultare i post sui codici dei colori e sullo stile dei bordi. Al passaggio del cursore lo sfondo del tooltip si mostrerà con una opacità del 70% per continuare a vedere parzialmente anche l'immagine sottostante.

La penisola del Kamchatka è in assoluto una delle zone del mondo più salvagge e affascinanti in cui la speranza di pescare un salmone degno di nota non può che tradursi in realtà. Siamo nell’estremo Est della EX Repubblica Sovietica, siberia dell’est, immediatamente sopra il Giappone di fianco all’Alaska separate dallo stretto di Bering. Vera spina dorsale del continente euroasiatico, la penisola della Kamchatka rappresenta l'estremità del mondo. Una regione così remota, che il termine stesso di Siberia non è più valido: gli si preferisce quello di Estremo Oriente Russo.

MOSTRARE IL TOOLTIP IN MOLTE IMMAGINI

Se si decide di mostrare questo tipo tooltip in molte immagini allora è conveniente incollare il CSS nel template. Il codice in questione è quello compreso tra le due righe evidenziate di giallo escluse. Tale codice può essere inserito nel template in due modalità che sono equivalenti. Con la prima opzione si va su Modello > Personalizza > Avanzato > Aggiungi CSS e si incolla nel campo posto a destra quindi si pone il cursore dopo l'ultima parentesi graffa e si pigia su Invio (OS Windows). Successivamente si va in alto a destra su Applica al blog. 

Con la seconda opzione invece si va su Modello > Modifica HTML, si cerca la riga ]]></b:skin> e subito sopra si incolla lo stesso codice. Per terminare si deve salvare il template. In entrambi i casi per ottenere questo effetto quando si posta una foto dovremo usare questo codice

<div class="imm-tooltip"><a href="#"><img src="URL_IMMAGINE" alt="nome-immagine" /><span class="tooltip">TESTO DEL TOOLTIP </span></a></div>

Al posto del cancelletto ( # ) si può inserire un URL per linkare una pagina web.