Pubblicato il 11/06/14e aggiornato il

Mostrare dei tooltip in stile cartoon al passaggio del mouse.

Come realizzare dei tooltip personalizzati da inserire in qualsiasi pagina web anche se il tutorial prende in esame solo un sito su Blogger.
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

tooltip-semplice

Naturalmente usando i CSS si possono creare dei tooltip molto più sofisticati. Andiamo su Modello > Modifica HTML, cerchiamo con Ctrl+F la riga  ]]></b:skin> e subito sopra incolliamo

a.tooltip1 { /* Aspetto testo visualizzato */
position: relative;
z-index: 9;
cursor: help;
text-decoration: underline;
}
a.tooltip1:hover {z-index: 99; text-decoration: none;}
a.tooltip1 span {display: none}
a.tooltip1:hover span { /* Stile del tooltip */
display: block;
position: absolute;
top: 1.5em; left: 1.5em;
width: 14em;
border: 1px solid #1df;
background: #EDE1F9;
color: #111;
text-align: center;
}

Nei post basterà andare in Modalità HTML e incollare questo codice

<a class="tooltip1">Testo visualizzato<span>Testo del tooltip che si visualizzerà al passaggio del cursore.</span></a>

per ottenere un tooltip con questo aspetto

tooltip-blogger

Il cursore prenderà l'aspetto di un punto interrogativo vista la presenza del tag cursor: help.  Si può scegliere un altro aspetto modificando tale parametro. Al posto di help possiamo scegliere tra questi valori: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help che portano a questo risultato

tipi-di-cursore

Oltre ai codici dei colori e allo stile dei bordi per il tooltip è importante il posizionamento con top: 1.5em; left: 1.5em; che lo mette in basso a destra. Con bottom: 1.5em; left: 1.5em; avremo

tooltip-posizionato

Possono essere settati i valori di 1.5em per trovare le giuste distanze (p.e. 1.8em oppure 2em). La larghezza del tooltip è data da width: 14em; e significa che è 14 volte la dimensione dei caratteri.

TOOLTIP IN STILE FUMETTO

 

Possiamo anche usare delle immagini di sfondo per la realizzazione di tooltip che ricordino i cartoon. Anche in questo caso si deve andare su Modello > Modifica HTML e si cerca la riga ]]></b:skin> quindi subito sopra a questa dovremo incollare un apposito CSS. Ne ho preparati tre
  1. CSS per i tooltip con sfondo verde (classe tt1)-
  2. CSS per i tooltip con sfondo rosa (classe tt2)-
  3. CSS per i tooltip con sfondo celeste (classe tt3)-
Nei codici precedenti si possono personalizzare i parametri come illustrato in precedenza

stile-tooltip-fumetto

Vista la direzione del fumetto il tooltip si visualizzerà in basso rispetto al testo. Per inserire il tooltip nei contenuti di un post dobbiamo andare il modalità HTML e incollare questo codice
 
<a href="#" class="ttX">testo visualizzato<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>

dove opzionalmente può essere inserito un URL di un collegamento al posto del cancelletto (#).  Dopo aver digitato il testo visualizzato e quello del tooltip si deve scegliere la classe da mettere al posto di ttX e che sarà tt1 per il tooltip verde, tt2 per il tooltip rosa e tt3 per il tooltip celeste

Concludo ricordando che questi tooltip possono essere inseriti in una qualsiasi pagina web racchiudendo il codice CSS tra i tag <style> e </style> per poi incollarlo sopra a </head> che è un tag fondamentale dell'HTML e che è presente in tutte le pagine web.




3 commenti :

  1. Ciao, vorrei sapere se conosci un modo per far si che il codice da inserire nei singoli post non si modifichi al passaggio alla modalità di scrittura standard (per eventuali modifiche più veloci a parti del testo o a immagini). Ho provato a modificarlo ma finora non ho trovato soluzione, se non quella poco pratica e ottimale di passare alla modalità html dopo l'eventuale modifica, e quindi di reinserire il tooltip ogni volta subito dopo.

    Attendo una tua risposta. Grazie in anticipo, saluti.

    RispondiElimina
    Risposte
    1. Purtroppo con Blogger c'è questo problema. Quando c'è un falso link come in questo caso bisogna rifare tutto dopo una modifica. Si possono anche togliere i link aggiunti automaticamente e sostituirli con un cancelletto # ma non so se sia un metodo più rapido
      @#

      Elimina
  2. Facile non usare mai la scrittura standard

    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.