Pubblicato il 21/12/11e aggiornato il

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

tooltip-jquery     

Alternativamente si può seguire la seguente procedura visto che ho già fatto il lavoro di caricare immagini e file javascript rispettivamente su Picasa e Google Sites. Si va su Modello > Backup/Ripristino e si salva una copia di sicurezza del template. Su Modello > Modifica HTML > Procedi si cerca la riga </head> e, immediatamente sopra, si incolla il seguente codice

<!-- Tooltip Inizio -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/jquery.tinyTips.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.tTip&#39;).tinyTips(&#39;title&#39;);
$(&#39;img.tTip&#39;).tinyTips(&#39;title&#39;);
});
</script>
<!-- Tooltip Fine - http://www.ideepercomputeredinternet.com -->

Nel momento in cui scrivo questo post la versione più recente di JQuery è la 1.7.1 ma se qualcuno aprirà questo articolo tra qualche mese o tra qualche anno sarà bene che controlli quale sia la versione più aggiornata di JQuery in modo da sostituire l'URL colorato di rosso con il nuovo indirizzo. Adesso bisogna cercare la riga ]]></b:skin> e, immediatamente sopra, incollare quest'altro blocco di codice

/*------ TOOLTIP TINYTIPS INIZIO -----*/
.tinyTip {
width: 325px;
padding: 17px 0px 0px 0px;
display: block;
background: url(https://lh5.googleusercontent.com/-o64GIDU4O9A/TvG0LP9XjZI/AAAAAAAAV3A/SqeXRfbCBc4/s325/tinyTip-top.png) 0px 0px no-repeat;
}
.tinyTip .content {
padding: 0px 15px 0px 15px;
font-size: 14px;
font-family: "Lucida Sans Unicode";
color: #010101;
background: url(https://lh5.googleusercontent.com/-PR6NMSJXXZU/TvG0GhzNV0I/AAAAAAAAV24/J2phTJbGjNk/s325/tinyTip-content.png) 0px 0px repeat-y;
}
.tinyTip .bottom {
height: 47px;
background: url(https://lh4.googleusercontent.com/-7-bBSJHDq5I/TvG0B4ejVpI/AAAAAAAAV2w/emAPRTqxmFw/s325/tinyTip-bottom.png) 0px 0px no-repeat;
font: 0px/0px sans-serif;
}
/*------ TOOLTIP TINYTIPS FINE -----*/

Non resta che salvare il modello. Quando si vorrà inserire un tooltip da visualizzare al passaggio del mouse su un determinato testo bisognerà andare in Modalità HTML e incollare il tooltip che dovrà avere questa struttura

<a class="tTip" href="#" title="Scritta da visualizzare dentro il tooltip">Testo</a>

dove la parte in rosso è quello che si visualizzerà dentro il tooltip al passaggio del mouse mentre quella in blu sarà il testo visibile che prenderà l'aspetto di un semplice link ereditato dallo stile del vostro blog. Il collegamento non sarà cliccabile perché al posto dell'indirizzo è stato inserito un cancelletto ( # ). Volendo è anche possibile inserire un collegamento. In questo caso il tooltip funge da descrizione di quello che troverà il lettore se ci cliccherà sopra.

Nel caso si voglia mettere un tooltip a una immagine si utilizza la stessa classe tTip con un codice da inserire in modalità HTML simile a questo

<img class="tTip" title="Testo va visualizzare nel tooltip" src="URL DELLA IMMAGINE" alt="NOME IMMAGINE" />

utile nei blog fotografici quando si voglia inserire una descrizione per le immagini pubblicate visibile solo al passaggio del cursore. Concludo ricordando che coloro che hanno un blog con dominio personalizzato potrebbero avere dei problemi perché spesso gli script caricati su Google Sites non funzionano. In questo caso è opportuno scaricare il file  https://sites.google.com/site/scriptperilblog/javascript-2/jquery.tinyTips.js e caricarlo su DropBox. 





13 commenti :

  1. ma sono troppo carini... possono essere utili a spiegare un blog... e le sue sezioni. Ma posso utilizzare direttamente il tuo codice o devo scaricare dal sito per la licenza?

    RispondiElimina
  2. @Soffio di Dea
    Puoi naturalmente usare il mio codice. Ho lasciato tutti i credit dell'autore. Se passi a un modello personalizzato è probabile che tu debba caricare su DropBox il javascript come specificato nel post

    RispondiElimina
  3. <script type='text/javascript'>
    $(document).ready(function() {
    $(&#39;a.tTip&#39;).tinyTips(&#39;title&#39;);
    $(&#39;img.tTip&#39;).tinyTips(&#39;title&#39;);
    });
    </script>

    il mio editor (Dreamweaver) mi segnala un errore al rigo 3 di questo codice ed infatti non riesco ad avere l'effetto tooltip.

    Per caso mi sai dare qualche dritta?

    E' possibile associarlo ad un bottone così:
    <input class="tTip" type="button"
    ?

    RispondiElimina
  4. @soccerbetter
    Prova con quest'altro codice decodificato (è lo stesso ma non in XML)
    <script type='text/javascript'>
    $(document).ready(function() {
    $('a.tTip').tinyTips('title');
    $('img.tTip').tinyTips('title');
    });
    Per verificare se funziona anche con un bottone bisognerebbe provare. In teoria basta creare una classe tTip però va inserito il tag title con il messaggio da visualizzare e quindi bisogna vedere se viene supportato.

    RispondiElimina
  5. Comunque in alternativa prova a togliere la riga
    $('img.tTip').tinyTips('title');
    che dovrebbe essere superflua.

    RispondiElimina
  6. @Ernesto Tirinnanzi
    non avevo fatto caso che era per blogger, l'ho sto adattando su una pagina HTML e il codice non parsato che mi hai scritto funziona.
    Ho associato la classe tTip ad un bottone e funziona l'effetto.

    Un'ultima cosa, vorrei che il tooltip comparisse sotto e non sopra al link, è possibile secondo te ?

    saluti e buone feste con affetto

    RispondiElimina
  7. @soccerbetter
    Per farlo apparire sotto bisogna cambiare completamente il CSS e riposizionare le tre immagini di sfondo (le puoi vedere incollando gli UTL nel browser), quella in alto da mettere in basso e viceversa. E' un lavoro di pazienza ma si può fare

    RispondiElimina
  8. scusa sono disperato come faccio a fare questo:http://www.calizzi.it/iole/posts100/post143/letteraRosa.html però sostituendo il testo con un immagine?????

    RispondiElimina
  9. @Manager
    Disperato è una parola grossa ;) L'autrice di questo widget in flash è la mia amica Iole che è certamente più ferrata di me a risponderti in merito. Io nel widget non vedo testo ma solo il credit di attribuzione a Iole. Dovresti imparare a usare dei programmi piuttosto complessi per realizzarlo. Ti consiglio di adoperare il widget di Iole così come è, di fartene fare uno personalizzato attraverso una donazione oppure di puntare su qualcosa di diverso.

    RispondiElimina
  10. Niente, non riesco proprio a farlo funzionare come si deve...
    Ho un dominio personalizzato, ho caricato tutto su dropbox, sostituito il link ecc ma non mi funziona correttamente: la parte 'top' del riquadro non mi appare, neanche il corpo che dovrebbe ripetersi, visualizza solo la parte finale con la spunta triangolare; il testo si visualizza ma prosegue dritto lungo tutta la linea orizzontale anzichè andare a capo e, infine, il tooltip (o l'unica parte che mi appare) compare sì, ma a centinaia di pixel spostato rispetto al link....
    Peccato perchè l'effetto era carinissimo e utile!! Nessuna idea del perchè?

    RispondiElimina
  11. @Ale
    Prova a caricare anche le altre immagini su DropBox, vale a dire
    https://lh5.googleusercontent.com/-o64GIDU4O9A/TvG0LP9XjZI/AAAAAAAAV3A/SqeXRfbCBc4/s325/tinyTip-top.png , ecc.
    Per la posizione puoi sempre provare a settarla agendo sul primo padding

    RispondiElimina
  12. Ti ringrazio un sacco per la veloce risposta!
    Ho caricato le tre immagini su dropbox ma purtroppo non è cambiato nulla: Ancora visualizzo solo l'immagine 'bottom' e la scritta che dovrebbe stare dentro i bordi del tooltip prosegue dritta per tutta la pagina...come prima.
    Non capisco, non so proprio come risolvere...!

    RispondiElimina
  13. @Ale
    Prova con quest'altro tipo di tooltip
    http://www.ideepercomputeredinternet.com/2011/03/come-creare-dei-tooltip-personalizzati.html

    RispondiElimina

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.