Joomla!: come aggiungere tooltip ai propri contenuti

Tra i vari modi per creare un articolo chiaro in tutti i suoi passaggi sul CMS Joomla! ce n’è uno che può rivelarsi abbastanza utile, ovvero l’utilizzo di tooltips da inserire su una parola, una frase o un’immagine per poterla spiegare e visualizzare in modo migliore con una “nuvoletta” esplicativa che apparirà sopra essa.

Le tooltips non sono altro che suggerimenti, elementi testuali o immagini che possono migliorare l’esperienza di lettura ai propri utenti e aumentare la chiarezza.

Per scaricare Tooltips per Joomla! è necessario seguire il solito percorso Estensioni –> Gestione –> Installa ed inserire Tooltips nel campo di ricerca. Il primo risultato sarà questo:

Impostazioni Generali

Dopo aver installato il plugin sarà possibile impostarlo come meglio crediamo seguendo il percorso Estensioni –> Plugin e cercando Tooltips. Facendo clic su System – Regular Labs – Tooltips si passerà alle impostazioni di base del plugin.

Nella scheda Stile si possono scegliere come sarà una tooltip di default. Nella prima parte delle impostazioni definiamo come sarà la parte testuale nell’articolo, ovvero:

– il colore del link che farà apparire la tooltip

– le caratteristiche della sottolineatura (presente, non presente, continua o tratteggiata)

– il colore della sottolineatura

Nella seconda parte delle impostazioni si decideranno le caratteristiche delle tooltips di suggerimento, ovvero i colori di titolo, testo, link, sfondo titolo, sfondo e bordo. Inoltre potranno essere definite anche le dimensioni.

NOTA BENE: il plugin può essere utilizzato anche lavorando direttamente sul codice HTML all’interno dell’articolo (vedi sottolineatura nell’immagine).

Come creare una Tooltip

Per mettere la prima Tooltip  in  un articolo (senza lavorare manualmente sul codice) è necessario sottolineare una parola o una frase e fare clic su Suggerimento. Si aprirà un popup dove potremo inserire tutto il testo necessario ed il titolo.

In questa finestra si può decidere cosa scrivere come titolo della Tooltip e come testo al suo interno. Nella parte Suggerimento si inseriscono titolo e descrizione della tooltip che apparirà, nella parte Link, che è fondamentale, si inserisce il testo che apparirà all’utente sottolineato e che farà apparire il suggerimento passandoci sopra col mouse.

NOTA BENE: se questa operazione viene fatta senza evidenziare prima il testo o l’elemento al quale legare la tooltip, nel testo finale dell’articolo apparirà solo la scritta “nuovo suggerimento” sottolineata.

Per inserire una tooltip con una immagine basterà sottolineare la parola e, nella parte Suggerimento, indicare immagine anziché testo.

Le tooltip nel nostro articolo appariranno così:

Una tooltip con immagine invece apparirà così:

Si può anche creare una tooltip su una immagine per poterla ingrandire al passaggio del mouse. Essa apparirà così:

I titoli e l’interno delle tooltip testuali possono essere cambiate a proprio piacimento inserendo nella apposita classe CSS il colore prescelto.

Il plugin Tooltips ha anche una versione Premium che consente, tra le altre opzioni, di decidere dove far apparire il suggerimento oppure se farle apparire solo con un clic.