Pubblicato il 12/02/14e aggiornato il

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

tag-title

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

descrizione-immagine

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

tooltip-tag-title

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://lh3.googleusercontent.com/-a25EMoeoyqA/UkKaUNzk6fI/AAAAAAAAjlM/LhCxcsk4NzM/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

tooltip-title-tag

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




5 commenti :

  1. Quest'articolo è molto utile. Grazie :)

    RispondiElimina
  2. Buongiorno Ernesto..adesso mi sono accorta che dalla navbar non riesco ad entrare nel design e nel modello per scrivere....come mai?mi capita in tutti e due i miei blog

    RispondiElimina
    Risposte
    1. Fermo restando che non è un problema. In questo blog la Navbar neppure c'è. Puoi entrare da qui
      www.blogger.com/home
      forse hai inserito un widget tipo ribbon o magari i cuoricini di San Valentino che danno fastidio per cliccare
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.