Mostrare un tooltip su più linee con il tag Title.

Come sistemare su più righe il tooltip di descrizione del link e della immagine con il tag title.

Nell'articolo precedente abbiamo visto come sia possibile inserire automaticamente i tag Title e Alt nel codice delle immagini postate nel blog e in questo post approfonderemo ulteriormente le potenzialità del tag Title che è quello che viene definito un attributo del link e che viene opzionalmente inserito nei collegamenti ipertestuali di testo, di immagini o di altri oggetti.

La particolarità del tag Title è che mostra in un tooltip il testo che vi viene digitato quando si passa sopra al link con il cursore. Questo avviene sia per i collegamenti testuali sia per le immagini.

Il codice HTML usato per un collegamento di testo con tag Title è il seguente

<a href="URL_LINK" title="Descrizione del link">Testo di ancoraggio</a>

La parte visibile è Testo di ancoraggio che quando ci si passa sopra con il mouse mostra il tooltip con la scritta Descrizione del link come mostrato nello screenshot successivo

L'utilità del tag Title è proprio quella di descrivere al lettore il significato della pagina linkata e viene visto di buon occhio anche dai motori di ricerca. Nel caso di immagini l'HTML è invece il seguente

<img src="URL_IMMAGINE" title="Descrizione della immagine"/>

che mostrerà il tooltip "Descrizione della immagine" quando si passerà sopra con il mouse

Quando si ha la necessità di inserire una lunga descrizione per una immagine o per un link il tooltip prenderà in larghezza tutto lo spazio del layout sia nel caso dei link sia in quello delle immagini

In questi casi si può scegliere di suddividere noi stessi il tooltip in due o più linee con questa struttura

title="Prima Riga&#13;&#10;Seconda Riga&#13;&#10;Terza Riga"

dove si possono inserire tutte le rughe che si vuole basta dividerle con la stringa &#13;&#10;. A titolo di esempio queste due HTML mostreranno i tooltip su più righe

<a href="http://www.google.it" title="Motore&#13;&#10;Di&#13;&#10;Ricerca">Google</a>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjaQzSn8RI3T-ul6iIYV-xZbBR3cKLdOTy7cw-IWM6KXkWmWXNToAgKSM5OHfIa5JBkCgMHYfN845c0bpKS2yU01liw2SNkNGucoQDLqcNYoMgcPW-gC-gxEhz0i-xD64hEkte76-mZFM/s590/chiesa.jpg" width="300" title="Piccola Chiesa Colorata&#13;&#10;Fotografata per il National Geographic&#13;&#10;in un piccolo villaggio del&#13;&#10;Continente Sudamericano"/>

nel modo seguente

Questo HTML è indipendente dalla piattaforma utilizzata e funzionerà in tutte le pagine web.