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

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

Mostrare dei tooltip in stile cartoon al passaggio del mouse.

I tooltip sono quelle informazioni aggiuntive che vengono visualizzate sopra a un elemento quando venga puntato dal cursore. Nell'HTML c'è un tag specifico per creare i tooltip che è il seguente 

<abbr title="TESTO DEL TOOLTIP">TESTO VISUALIZZATO</abbr>

in cui basta digitare il testo da visualizzare e quello dei tooltip. Questo metodo di inserimento dei tooltip è molto semplice ma anche poco interessante dal punto di vista estetico visto che il testo del tooltip si mostrerà al passaggio del cursore in un rettangolo grigio di scarso effetto grafico

Mostrare un tooltip su più linee 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>

Come mostrare un tooltip sulle immagini al passaggio del mouse.

Tra le funzionalità di Blogger esiste quella di inserire una descrizione della immagine che si è postata tramite Editor. Dopo che si è aggiunta l'immagine basta selezionarla e scegliere Aggiungi didascalia. Si dovrà digitare un testo che sarà visualizzato centralmente al di sotto della stessa immagine. Si possono aggiungere descrizioni anche piuttosto lunghe il cui testo sarà centrato sotto la foto.

In questo articolo vediamo una possibile alternativa o se si vuole una integrazione di questa funzionalità. L'obiettivo è quello di mostrare un tooltip con le informazioni sulla immagine quando ci si passi sopra con il cursore. Si possono settare una gran quantità di parametri e questo metodo può essere usato per una singola immagine oppure si può inserire il codice nel modello e richiamare l'effetto tramite l'identificativo dei fogli di stile che si sono dichiarati. Ecco un esempio di come si visualizza una tale foto

Come inserire in Blogger dei tooltip con JQuery.

I tooltip sono dei fumetti che vengono mostrati nella pagina non appena il mouse passa sopra a un determinato testo o a una certa immagine. Ci sono tooltip che possono venire installati in modo semplicissimo, altri che hanno bisogno di un qualche foglio di stile e altri ancora, più sofisticati, che oltre ai CSS utilizzano anche immagini precaricate per avere l'aspetto di veri cartoon.

In questo articolo mi occuperò di come inserire dei tooltip in un qualsiasi articolo del blog utilizzando la libreria JQuery e il plugin Tiny Tips. Dal sito di Tiny Tips si può scaricare il file javascript insieme alle immagini che servono per il CSS del tooltip. Basta andare su Download > Product version. Il file sarà in formato ZIP e, dopo essere stato scompattato con 7-Zip o programma analogo, si vedrà che contiene il file jquery.tinyTips.js, due file di testo con il changelog e la licenza e una cartella di Demo con al suo interno le sottocartelle images, js e style.

Si può fare tutto da soli e seguire le istruzioni dell'autore per l'installazione della personalizzazione che porta a tooltip con questo aspetto

Come inserire dei semplici tooltip in un articolo.

Il tooltip è una sorta di fumetto che appare sopra a una parola o una porzione di testo quando questo viene puntato con il mouse. E' una opzione che serve ai blogger per dare ulteriori informazioni senza appesantire troppo l'articolo. Penso a un blog che si occupa di eventi e che potrebbe semplicemente elencarli mentre passandoci sopra con il mouse si potrebbe conoscere anche il luogo, la data e l'ora di ciascuno di essi.

Direi che l'esempio che ho fatto è anche troppo limitativo rispetto alla grande potenzialità di questo strumento. Ho già presentato il codice di un semplice tooltip

<abbr title="TESTO VISUALIZZATO NELLA FINESTRA DEL TOOLTIP">TESTO VISIBILE NELLA PAGINA</abbr>

Come aggiungere dei tooltip alle immagini del blog con Thinglink.

Scorrendo gli articoli di Digital Inspiration ho scoperto l'esistenza di uno strumento online veramente interessante. Sotto certi aspetti ricorda Apture ma è meno invasivo e complesso e agisce solo sulle immagini. L'idea alla base di questo progetto sta nel consentire un facile inserimento di tooltip nelle singole immagini postate nel blog, corredati di descrizione e link.

Tutti i blog in cui le foto hanno aspetto importante saranno sicuramente interessati a rendere l'esperienza dei loro lettori ancora più dettagliata e originale.

• Demo dell'inserimento di tooltip multimediali con Thinglink -

Se passate con il mouse sopra a una immagine, vi appariranno dei tooltip con un link a una pagina e con la descrizione dell'immagine. Ci sono anche i bottoni per una condivisione social di cui non mi occuperò ma che lascerò alla scoperta di coloro che vorranno diventare utenti di questo interessante servizio.

Come aggiungere il tag Title nel modello di Blogger.

I tag Title e Alt sono in genere usati quando si postano delle immagini. La struttura del codice è questa

<img src="URL_IMMAGINE" title="Titolo immagine" alt="Testo alternativo">

dove il testo in Title viene visualizzato quando si passa sopra all'immagine con il mouse mentre quello in ALT appare nei browser che non riescono a caricare la foto ed è molto importante ai fini SEO. Il tag Title può essere usato anche in un qualsiasi collegamento per mostrare un tooltip con la descrizione della pagina. Per esempio questo codice

<a href="http://www.ideepercomputeredinternet.com/" title="Tutorial per utenti di Blogger">IDEE PER COMPUTER ED INTERNET</a>

produce questo link

Come creare dei tooltip personalizzati a forma di fumetto.

Ricordo che il tooltip è un piccolo popup che si visualizza nel momento si passa con il mouse sopra a una parola specifica. C'è un sistema molto semplice per crearlo attraverso questo codice da inserire nell'articolo in modalità HTML

<abbr title="TESTO DEL TOOLTIP">TESTO VISUALIZZATO</abbr>

Questo è un modo utile per aggiungere una descrizione a una particolare espressione o frase: uso del tooltip per i blogger. Se si vuole una maggiore personalizzazione di questa funzionalità bisogna creare dei CSS da aggiungere al modello. Si va su Design > Modifica HTML e si salva il modello completo. Si cerca la riga ]]></b:skin> che denota la fine delle classi di stile del modello e subito sopra si può incollare uno dei seguenti tre codici.

1. CSS tooltip numero 1 con sfondo verde -
2. CSS tooltip numero 2 con sfondo rosa -
3. CSS tooltip numero 3 con sfondo celeste -

Come mostrare un tooltip in una parola o in una frase.

Tutti sanno come inserire un collegamento a una parola o a una frase. Tutto ciò che è visibile in un link, si chiama anchor text o testo di ancoraggio se si usa la nostra lingua. Non è sempre necessario, né tantomeno utile, inserire dei link per arricchire i contenuti del post. In certi casi potrebbe essere più efficace un tooltip che viene visualizzato da chi passa sopra al testo con il mouse.

Certamente vi sarete imbattuti in questo elemento ma, per rendere più chiaro l'argomento del post, passate con il mouse sopra al testo seguente

Definizione di Tooltip

Vedrete aprirsi un piccolo rettangolo di questo genere

La sintassi per creare questo effetto che permette di arricchire il blog è semplicissima

<abbr title="TESTO VISUALIZZATO NEL TOOLTIP">TESTO DI ANCORAGGIO</abbr>

Il codice va incollato in Modalità HTML e, una volta tornati alla visualizzazione normale, sarà possibile cambiare il testo per quanto riguarda i caratteri, le dimensioni e i colori.