Mostrare un tooltip personalizzato al passaggio del cursore su una foto

Come personalizzare il tooltip del testo del tag Title che viene mostrato quando si passa con il mouse sopra a una immagine

Quando si pubblica una immagine in una pagina web, oltre al suo URL diretto, si possono opzionalmente inserire altri parametri come attributi, quali la larghezza, l'altezza e il bordo.

Dal punto di vista SEO, è fondamentale l'attributo Alt, ovvero il Testo Alternativo, che serve per digitare un titolo o una descrizione testuale della foto, che verrà mostrato dal browser a chi apre la pagina qualora l'immagine non si possa caricare o se sia troppo lenta a farlo.

Meno importante per i motori di ricerca, ma particolarmente utile per i navigatori, è il tag Title, che serve sempre per digitare un titolo o una descrizione della foto ma che il lettore visualizza come tooltip, quando passa con il mouse sopra alla immagine.

Il tooltip del contenuto del tag Title, mostrato di default dai browser, è esteticamente poco valido, e può essere anche poco in linea con i colori del sito. Vediamo come migliorarne l'aspetto 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.

Potremo usare questa tecnica per aggiungere un tooltip personalizzato a una sola immagine, oppure caricarlo nel Tema come regola CSS e personalizzare i tooltip delle foto semplicemente riprendendo il nome della classe CSS.

COME MOSTRARE UN TOOLTIP DESCRITTIVO SU UNA FOTO

Si apre l'Editor del nostro CMS, che può essere Blogger ma anche Wordpress, e si incolla 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:#ff9; /* Colore cornice immagine */
padding:5px; /* Spessore cornice immagine */
}
.tooltip { /* Stile del testo*/
position: absolute;
width:360px; /* Larghezza tooltip */
font-size:14px; /* Dimensione font del tooltip */
font-family: Georgia; /* Famiglia dei caratteri */
top: 4%;
left: 2%; /* Posizione inizio del tooltip*/
opacity: 0;
padding: 3px 2px; /* Distanza dai bordi del testo */
text-align:justify; /* Testo giustificato */
color: #fff; /* Colore testo tooltip */
background: black; /* Colore sfondo tooltip */
transition:all ease .5s; /* Durata Transizione di mezzo secondo */
}
.imm-tooltip:hover .tooltip {
opacity: .4; /* Trasparenza di testo e sfondo al passaggio del mouse */
}
</style>
<div class="imm-tooltip"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAIrKoIHrRPelO5LjoI9z6Sys_TJGBwp05SkLUwpIP03Yjj38LaphiRIb7t54gFvvBYFOACZQzeR9oWmIxlM9j4DVhhxEQ8kGY6YIYRaxkdBRHjC3uceUERdbyIyHj_XfuEQfqOpC-6_Pl/s1600/Bazinga_rieki-400.jpg" alt="nome-immagine" /><span class="tooltip">Testo del tooltip </span></a></div>

dove, al posto dell' URL colorato di rosso, si inserisce l'indirizzo della nostra immagine. Opzionalmente si può aggiungere un collegamento al posto del cancelletto # . Altrimenti il tag <a href="#"> e la sua chiusura </a> vanno eliminati. Quando ci si passerà sopra con il cursore si visualizzerà un tooltip personalizzato.

Accanto a ogni attributo ho aggiunto dei commenti che ne illustrano il significato. Sono colorati di verde e possono essere tolti dopo che se ne è appreso il funzionamento. Si possono impostare dimensioni della immagine e del tooltip, dimensione e famiglia di font e aggiungere una cornice e un bordo colorati.

Particolarmente importante è il livello di trasparenza del testo e dello sfondo (nero nel codice proposto) per continuare a visualizzare anche la foto sottostante oltre al testo del tooltip. Nel codice è stato proposta una opacità del 40% ovvero 0.4. Si può aumentare l'opacità p.e. con 0.5 per rendere il testo del tooltip più visibile.

Bazinga rieki è una specie di Rhizostomeae, unica conosciuta del genere Bazinga, scoperta nel 2013 sulla costa orientale dell'Australia. La biologa marina Lisa-Ann Gershwin, assieme a Peter Davie, descrisse l'animale nel 2013, dall'olotipo trovato nel Nuovo Galles del Sud. Bazinga rieki non poteva essere inserito in nessuna delle famiglie né sottordini dell'ordine delle Rhizostomeae, così vennero definiti anche la famiglia delle Bazingidae e il sottordine delle Ptychophorae. Il nome del genere, Bazinga, deriva dall'espressione utilizzata da Sheldon Cooper, personaggio della serie televisiva The Big Bang Theory, che significa - ti ho fregato! -. Si suppone, infatti, che la specie non fosse stata ancora scoperta in quanto l'animale, per le sue piccole dimensioni, veniva sempre scambiato per un esemplare giovane di un'altra specie.

Si può anche aggiungere il CSS nel modello per poi riprendere solo l'HTML nel post.

CODICE DEL TOOLTIP NEL TEMA DI BLOGGER

Gli utenti di Blogger possono inserire il CSS nel template, per facilitarsi il compito, nel caso in cui volessero mostrare molte immagini con questa personalizzazione.  Si va su Tema -> Modifica HTML e si cerca la riga ]]></b:skin>, quindi, subito sopra si incolla il codice compreso tra le due righe evidenziate di giallo escluse.

Per ottenere questo effetto quindi, quando si posta una foto, dovremo usare un codice con questa sintassi

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

dove al posto dei due cancelletti # si inseriscono rispettivamente l'indirizzo del collegamento e l'URL diretto della immagine. Se non si vogliono inserire link deve essere eliminato il tag <a href="#"> e la sua chiusura </a>.