Pubblicato il 11/11/11e aggiornato il

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.

tooltip-immagine

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>

che apre una piccola finestra con sfondo grigio quando ci si passa sopra con il mouse: ESEMPIO DI SEMPLICE TOOLTIP. Ho anche già illustrato come si possono creare dei tooltip a forma di fumetto utilizzando delle particolari immagini di sfondo. Questo post vuole essere una via di mezzo cioè presentare un tooltip che non ha bisogno di immagini ma che può essere personalizzato nello stile dei bordi, nel colore del testo e nel colore di sfondo. Ecco il codice che dovrà essere incollato andando su Modello > Modifica HTML > Procedi subito sopra la riga ]]></b:skin>

a.tooltip { /* Stile del testo del tooltip */
position: relative;
z-index: 24;
cursor: help;
text-decoration: underline;
}
a.tooltip:hover {z-index: 25; text-decoration: none;}
a.tooltip span {display: none}
a.tooltip:hover span { /* Stile della descrizione */
display: block;
position: absolute;
top: 2em; left: 2em;
width: 16em;
border: 1px solid #940F04; /* Stile del bordo */
background: #FFEAE9;
color: #003366;
text-align: center;
}

In subordine si può aggiungere il tag <style> all'inizio e </style> alla fine del codice e incollarlo sopra alla riga </head>. Le personalizzazioni riguardano lo stile del testo del tooltip che sarà sottolineato (underline) e con il cursore che sarà visto a forma di punto interrogativo. Si può anche configurare lo stile della descrizione mediante la posizione e la larghezza del tooltip. Il tag em rappresenta la dimensione dei caratteri del blog quindi si tratta di valori che sono correlati a questo parametro. Oltre allo stile del bordo si possono anche scegliere il colore dello sfondo, il colore del testo e il suo allineamento (left,right o center). I meno esperti possono consultare il post sui codici dei colori. Ho pubblicato in rete una Demo di un tooltip eseguita con questo sistema.

Quando si vuole creare un tooltip basta andare in modalità HTML nell'Editor di Blogger o su Windows Live Writer e incollare un codice come questo

<a class="tooltip">Testo nel post<span>Messaggio visualizzato nel tooltip</span></a>

dove la scritta in blu si visualizzerà normalmente e quella in rosso si vedrà nel rettangolo del tooltip che si aprirà al passaggio del mouse.





11 commenti :

  1. Ciao Ernesto... ho bisogno di te *__* Premetto che sono un'imbranata esagerata col blo... ma mi servirebbe la spiegazione del "read more".... mi piacerebbe come ce l'ha http://www.soffiodideanailart.blogspot.com/ *__* help me ♥♥♥ (ti ho scritto anche su facebook) ^_^

    RispondiElimina
  2. @Simona
    Soffio Di Dea si è creata il modello tramite il programma Artisteer quindi non è possibile avere una struttura simile. Se invece ti riferisci a come sostituire il Read More o Ulteriori Informazioni con una immagine, leggi questo post
    http://www.ideepercomputeredinternet.com/2009/09/come-inserire-un-al-posto-della-scritta.html
    Se poi l'immagine la vuoi sulla destra come lei allora leggi qui
    http://www.ideepercomputeredinternet.com/2010/09/come-inserire-immagine-e-testo-su-lati.html
    Se il testo non ce lo vuoi togli queste due righe
    <span style='float:left; margin-left:10px'>
    <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></span>
    Se poi vuoi proprio l'immagine come Soffio di Dea allora il suo URL è questo
    http://dl.dropbox.com/u/20545928/template/ReadMore3b.png
    ma scaricala e ricaricala sul tuo Picasa modificando qualcosa oppure chiedi il permesso a Soffio di Dea per poterla utilizzare senza modifiche.

    RispondiElimina
  3. Ciao Parsifal. Quando scrivesti quell'articolo sui tooltip mi fu davvero utile e da allora inziziai ad usarli. L'unico problema che mi si è sempre presentato è che con FF e Chrome (IE è ok) ciò che scrivo dentro al fumetto, se trova una foto adiacente nel post, non riesce a sovrapporsi. Un esempio è meglio di tante parole: http://autodimerda.blogspot.com/2011/09/autobianchi-bianchina.html
    in questo post ad esmpio è la seconda parola scritta in blu che trovi (motore a sogliola).
    Hai qualche suggerimento?

    PS:L'effetto del tootlip di scendere nel corpo del testo, l'ho dovuto adottare perchè se lo stesso fuoriusciva dal layout del post veniva troncato.

    RispondiElimina
  4. @Auto ...
    Lo sai che con i browser è un gran casino. Per la sovrapposizione non mi ricordo ma mi sembra che ci fossero state delle righe tipo
    z-index:24;
    e
    z-index:25;
    prova a mettere rispettivamente
    z-index:98;
    z-index:99;
    o anche numeri più alti

    RispondiElimina
  5. Ciao Ernesto,
    come posso inserire un link all' interno del tooltip?
    Grazie Mille

    RispondiElimina
  6. @Vj's Design
    Con questo sistema non può essere fatto. Prova con questo
    http://www.ideepercomputeredinternet.com/2011/03/come-creare-dei-tooltip-personalizzati.html

    RispondiElimina
  7. con internet explorer non funziona come farlo funzionare con tutti broser

    RispondiElimina
    Risposte
    1. @ colorbis ...
      Con IE non funziona quasi nulla. Prova in questo modo
      http://www.ideepercomputeredinternet.com/2012/10/cross-browser-internet-explorer-ie9-blogger.html

      Elimina
    2. volevo fare un menu simile a questo blog pero non so come la fatto che funziona con tutti browser-
      http://tvrfull.blogspot.it/

      Elimina
    3. Che tipo di menu può essere ???? ho cercato di fare lo stesa cosa pero a me non fuziona...???

      Elimina
    4. @ colorbis ...
      Il menù dovrebbe essere questo
      http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
      ma modificato

      Elimina

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.