Pubblicato il 12/02/14 - aggiornato il  | 4 commenti :

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://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

tooltip-title-tag

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


4 commenti :

  1. 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
  2. Grandeeee!!! Non lo sapevo! :-P

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy