Pubblicato il 27/03/11e aggiornato il

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.

Si salva il modello. Si può vedere il funzionamento di ciascuno accedendo al post demo dei tooltip personalizzati.

demo dei tooltip come fumetti

Nello screenshot precedente si vedono i tre stili di tooltip che sono stati proposti. Si tratta di tooltip che hanno la forma di fumetto e che si adattano come dimensioni a quelle della lunghezza della descrizione. La sintassi per inserire un tooltip è la seguente

<a href="#" class="ttX">testo che ha il tooltip<span class="tooltip"><span class="top"></span><span class="middle">Descrizione che sarà visualizzata all'interno della finestra del tooltip</span><span class="bottom"></span></span></a>

Nel collegamento si può lasciare il cancelletto ( # ) se non si vuole inserire alcun link oppure può essere incollato l'URL di una pagina. In questo caso la descrizione potrebbe essere proprio una anteprima di quello che troverà il visitatore se ci clicca sopra. Quando si scriverà il post, nell'editor non apparirà quello che invece sarà visto nel post che poi si pubblicherà ma sarà visualizzata per intero anche la descrizione del tooltip.

Il dato fondamentale è quello della classe indicata genericamente con ttX. Dovrà essere inserito

  1. class="tt1" per lo stile numero 1
  2. class="tt2" per lo stile numero 2
  3. class="tt3" per lo stile numero 3

Si possono incollare anche tutti i tre i codici nel template, uno di seguito all'altro, e poi scegliere di volta in volta quale stile di tooltip utilizzare. L'idea di questa personalizzazione e le immagini per il codice le ho prese da Ciudad Blogger.





18 commenti :

  1. allora l'ho testato sul mio blog di prova... perfettamente funzionante (grazie)... solo che non devo metterlo nell'anteprima del post in home page, prima cioè del reademore, altrimenti mi appare scritto come testo ciò che sta nella nuvoletta. Magari prova a testarlo anche nei tuoi post con reademore. Grazie molto carino!

    RispondiElimina
  2. @Soffio di Dea
    Funzionano ugualmente prima e dopo il read more. Puoi controllare andando nella homepage
    http://design-prova.blogspot.com/
    e poi aprendo il post
    http://design-prova.blogspot.com/2011/03/nuovo-post-per-testare-il-tooltip-prima.html
    Forse hai accidentalmente tralasciato qualche piccola porzione di codice.

    RispondiElimina
  3. sì probabile perché avevo preso il mio read more prima che tu ne facessi un articolo dettagliato. Mi ero ripromessa di ricontrollarlo ma poi non l'ho fatto... grazie mille... li confronterò allora :* kiss

    RispondiElimina
  4. Bella modifica complimenti. Magari l avessi saputa quando iniziai il blog :)

    In rete trovi siti con tooltip veramente geniali, anche per foto e con diversi effetti.

    Tks!

    RispondiElimina
  5. Dimenticavo...
    in WLW applicando la modifica da HTML e poi tornando ad editare il post da Modifica esce l avviso di segnalazione errori. Negando l'invio della segnalazione si può tranquillamente continuare a scrivere, ma è un evento normale e trascurabile?

    RispondiElimina
  6. @AUTOdiMERDA Se fai l'aggiornamento del tema può darsi che scompaia, oppure no, però mi sembra solo una sottigliezza.

    @Soffio di Dea
    Può essere che tu inserisca il read more attraverso uno script che non è quello ufficiale di Blogger

    RispondiElimina
  7. Bellissimo! L'avevo chiesto tempo fa... la cosa più interessante e che nn si usa nessun script!

    Ma una domanda.
    e sevolessi dare un tooltip ad un oggetto html invece che ad una parola? e inserirlo all'interno del modello senza che mi dia l'errore?

    IL MONTES PUSHER MUSIC

    RispondiElimina
  8. Si può inserire il tooltip anche in una immagine. basta inserire il codice html dell'immagine. Questo può valere anche per un oggetto SWF e altre cose. Guarda la parte finale di questo post di prova
    http://design-prova.blogspot.com/2011/03/demo-dellinserimento-di-tooltip.html

    RispondiElimina
  9. sì infatti a me è il read more con miniatura... preso nn ricordo dove -.- devo fare varie prove per capire come risolvere... grazie mille.

    RispondiElimina
  10. Geniale! Grazie mille! ;)
    Lo provo subito.

    RispondiElimina
  11. Perfetto!! Ci sono riuscito! Lo Inserito nel template e messo ad oggetto SWF.
    Ho anche modificato qualche distanza, e le due immagini che c'erano nei Css per rendere la nuvoletta più attinente al template.
    Puoi vederlo qui http://ilmontespushermusic.blogspot.com/ passando sopra il player a destra della testata. ^^
    Grazie come sempre.. :) Alla prossima!

    IL MONTES PUSHER MUSIC

    RispondiElimina
  12. @IL Montes
    Ottimo. Credo che si possa inserire qualsiasi oggetto HTML al posto del testo. Al limite penso che possa funzionare anche con dei video.

    RispondiElimina
  13. Ciao Ernesto. Purtroppo sembra che con FF e Chrome i tooltip vengano "spezzati". Infatti con FF non riesco a visualizzarlo corretamente (vedi il mio blog). Hai qualche suggerimento?

    RispondiElimina
  14. @AUTOdiMERDA Non so che dirti perché nel post di prova funzionano con tutti i browser quindi ci deve essere qualche incompatibilità.

    RispondiElimina
  15. Questo perchè nella tua pagina di prova il tooltip appare integralmente nella colonna principale del blog. Se la parola collegata al tooltip fosse più a destra (vicino alla sidebar per intenderci) l'effetto verrebbe spezzato. Almeno questo è ciò che ho potuto verfificare con FF e chrome.

    RispondiElimina
  16. @AUTOdiMERDA In tutta sincerità non so aiutarti. Va a sapere da cosa dipende ^_^

    RispondiElimina
  17. Allora Ernesto..
    Diciamo che un abile gioco di bacino ho aggirato il problemino :)
    Il tooltip va a prendere lo spazio della sola colonna del post e sembra che non dia problemi con gli altri browser. Il parametro più importante che ho dovuto modificare è stato il position: relative - invece di absolute.

    Questa modifica mi ha fatto pensare anche a come poter utilizzare questi tooltip per creare un menu+sottomenu senza quindi usare nessun java. ci sto lavorando in questo momento e se vuoi dare un occhiata lo trovi "work in progress" nella sidebar come ultimo elemento. Fammi sapere magari se non hai problemi di visualizzazione, ciao grazie.
    Paolo

    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.