I tooltip permettono a l’utente di visualizzare testo descrittivo o informazione supplementari al passaggio del mouse sopra un link. Tanti sono i esempi in giro per la rete. Di seguito le miei prove con 3 esempi di tooltip css (con un testo semplice, con un immagine più testo e con immagine di sfondo per creare l’effetto a ‘bolla’) e in fine la loro compatibilità.
Css tooltip - esempio 1 con testo
Questo primo esempio di tooltip è un semplice testo descrittivo dentro un elemento <span> a quale è applicato lo stile css.
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.
Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteriinsieme di caratteri tipografici caratterizzati e accomunati da un certo stile grafico e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazionecomposizione di riviste, di libri, di manifesti e di ogni sorta di pubblicazioni, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
Html usato per i link:
<a href="#nogo" class="css_tooltip">link<span>css tooltip</span></a>
Stile css applicato:
a.css_tooltip{
position:relative; /*richiesto per posizionare in modo assoluto elementi span*/
text-decoration:none; /*rimuove la sottolineatura del testo*/
}
a.css_tooltip:hover{
background-color:#FFFFFF; /*un colore di sfondo è richiesto per Internet Explorer 6*/
}
a.css_tooltip span{
display:none; /*nasconde elementi span in apertura*/
}
a.css_tooltip:hover span{
display:block; /*elementi span vengono visualizzati come elementi di blocco*/
position:absolute; /*posizionamento in modo assoluto*/
z-index:20; /*richiesto per posizionare elementi span al di sopra dei altri link*/
top:1.4em;
left:2em;
/*stile del css tooltip*/
width:150px;
border:1px solid #0CF;
background-color:#CFF;
color:#000;
padding:5px;
}
Css tooltip - esempio 2 con un immagine e testo
Questo secondo esempio è basato su quello precedente aggiungendo un immagine nel elemento <span>.
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.
Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri
insieme di caratteri tipografici caratterizzati e accomunati da un certo stile grafico e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazionecomposizione di riviste, di libri, di manifesti e di ogni sorta di pubblicazioni, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
Html usato per i link:
<a href="#nogo" class="css_tooltip">link<span><img src="miaImg.jpg" alt="" /><b>css tooltip</b></span></a>
Stile css applicato:
a.css_tooltip{
position:relative;
text-decoration:none;
}
a.css_tooltip:hover{
background-color:transparent;
}
a.css_tooltip span{
display: none;
}
a.css_tooltip:hover span{
display:block;
position:absolute;
z-index:20;
top:1.3em;
left:1em;
width:203px;
padding:5px;
border:2px solid #666666;
background-color:#000000;
color:#FFFFFF;
}
a.css_tooltip span img{
border:1px solid #FFFFFF;
}
a.css_tooltip span b{
display:block;
font-weight:normal;
}
Css tooltip - esempio 3 con immagine di sfondo
Questo tooltip css è costituito di 2 immagini di sfondo applicati a 2 elementi separati (<b> e <em>) vuoti, per creare la tradizionale ‘bolla’.
css_tooltip_top.gif: 
css_tooltip_bot.gif: 
Mentre il testo descrittivo stesso è contenuto dentro un elemento <i>.
Questi 3 elementi sono come visto prima dentro un elemento <span>.
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.
Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteriinsieme di caratteri tipografici caratterizzati e accomunati da un certo stile grafico e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazionecomposizione di riviste, di libri, di manifesti e di ogni sorta di pubblicazioni, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
Html usato per i link:
<a href="#nogo" class="css_tooltip">link<span><b></b><i>css tooltip</i><em></em></span></a>
Stile css applicato:
a.css_tooltip{
position:relative;
_display:inline-block; /*richiesto per la posizione assoluta bottom per Internet Explorer 6*/
text-decoration:none;
}
a.css_tooltip span{
display:none;
}
a.css_tooltip:hover{
background-color:#FFFFFF;
}
a.css_tooltip:hover span{
display:block;
position:absolute;
z-index:20;
bottom:1em;
left:1em;
width:200px;
color:#000;
}
a.css_tooltip span b{
display:block;
height:10px;
background:url(css_tooltip_top.gif) no-repeat bottom;
}
a.css_tooltip span em{
display:block;
height:32px;
background:url(css_tooltip_bot.gif) no-repeat;
}
a.css_tooltip span i{
display:block;
background-color:#FFFBCC;
border-left:1px solid #FFCC01;
border-right:1px solid #FFCC01;
padding:0 5px;
}
La compatibilità dei tooltip css
Questi 3 esempi sono stati provati con Firefox 2+, Internet Explorer 6+, Safari 3+ e Opera 9 su Windows.
In tutti i casi è importante per Internet Explorer 6 di aggiungere un colore di sfondo sullo stato :hover del link che sia colorato o trasparente (Esempio: a:hover{background-color:#FFFFFF;}).
Nel caso che il tooltip viene posizionato in modo assoluto con la proprietà ‘bottom’, Internet Explorer 6 richiede anche la dichiarazione css display:inline-block; o il tooltip si posiziona in relazione al suo paragrafo è non più in relazione al link stesso.
Nel terzo esempio è applicato usando un hack che viene letto solo da IE6 e ignorato da browser più ‘moderni’ con _display:inline-block;. Anche se questo metodo è funzionante, non è valido seguendo le specifiche della W3C. Se vuoi validare il stile css, meglio inserirlo in un foglio css esterno importato con i commenti condizionali.
Sempre per Internet Explorer (che sia versione 6 o superiore), il z-index non è applicato e eventuale link che si trovano vicini al tooltip saranno viasualizzato al di sopra.
Ecco un immagine di preview fatta con Internet Explorer 7:
Rimane la compatibilità per Opera 9.
Opera 9 ha un problema nel visualizzare questi tooltip in un modo del tutto coretto.
Il tooltip viene spezzato e visualizzato completamente solo se si passa sopra il tolltip con il mouse.
Immagine di preview fatta con Opera 9:
Questo problema sembra essere dovuto al fatto di applicare lo <span> come elemento di blocco mentre il link <a> è un elemento in linea. Sopra elementi di blocco, i tooltip di sopra funzionano per opera 9 senza problemi. (per maggiore informazione sulla differenza tra elementi di blocco e in linea, leggere questo articolo)
Purtroppo non ho trovato una soluzione valida a questo problema, altro le dichiarazione top:0; e left:0; che risulta ad avere il tooltip che si sovrappone al link stesso e automaticamente si visualizza visto che il mouse si trova sopra il tooltip in apertura come di seguito:
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.
Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteriinsieme di caratteri tipografici caratterizzati e accomunati da un certo stile grafico e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazionecomposizione di riviste, di libri, di manifesti e di ogni sorta di pubblicazioni, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
Il css applicato sullo stato hover:
a.css_tooltip:hover span{
display:block;
position:absolute;
top:0;
left:0;
width:150px;
border:1px solid #0cf;
background-color:#cff;
color:#000;
padding:5px;
}
O allora, dichiarando l’elemento span come elemento inlinea, invece di blocco e senza specificare una posizione precisa, il tooltip si ritrova a destra del link come di seguito.
NB: questa ultima soluzione è nella sua semplicità l’unica con la maggiore compatibilità per applicare il span ad un elemento inlinea come nel caso del link, peccato che la posizione del tooltip css sia ridotta a una
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.
Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteriinsieme di caratteri tipografici caratterizzati e accomunati da un certo stile grafico e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazionecomposizione di riviste, di libri, di manifesti e di ogni sorta di pubblicazioni, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
Il css applicato sullo stato hover:
a.css_tool_tip_0:hover span{
display:inline;
position:absolute;
width:150px;
border:1px solid #0cf;
background-color:#cff;
color:#000;
padding:5px;
}
{ 1 trackback }
{ 1 comment… read it below or add one }
Ottimo post!
Era proprio quello che cercavo!
Grazie