I tooltip sono quei piccoli box che su diversi siti appaiono al passaggio del mouse sopra
un link. Il loro scopo è quello di fornire maggiori informazioni su quello che
l'utente sta per cliccare. Sono un elemento molto usato nel web design
attuale e le soluzioni più comuni per implementarli ricorrono spesso
all'utilizzo di Javascript.
L'obiettivo di questo articolo è quello di riprodurre i tooltip
esclusivamente tramite i CSS. La tecnica spiegata è una delle tante varianti reperibili in rete ispirate ad un classico come Pure CSS Popups di Eric Meyer.
Il markup
Il tooltip agisce sui link perciò la nostra base di partenza sarà
ovviamente un tag ancora:
<a href="#">Tooltip</a>
L'idea alla base è quella di aggiungere all'ancora un elemento invisibile
che appaia al passaggio del mouse. Tralasciando per ora la parte relativa al
CSS, l'unico elemento generico che è possibile includere in <a> è
<span>, in quanto elemento inline: inserire un elemento di blocco
dentro ad uno inline, per quanto possibile, non vi farà superare i test di
validazione.
<a href="#">Tooltip
<span>Testo</span></a>
Il foglio di stile
Abbiamo detto che a "riposo" lo span dentro al nostro link sarà
invisibile. Apparirà invece solo al passaggio del mouse:
a span { display:none; }
a:hover span { display:block; }
Andando a provare l'esempio costruito fino ad ora si nota subito come lo
<span> vada a ritagliarsi un posto nello spazio della pagina. Per
evitare che una volta inserita in un layout, il tooltip lo faccia
"esplodere", siamo costretti a "slegarlo" dal normale flusso della pagina, e
lo facciamo grazie alla proprietà z-index:
a:hover span {
display: block;
z-index:1;
}
Il prossimo passo è quella di dimensionarlo e posizionarlo correttamente
tramite i posizionamenti assoluti:
a:hover span {
display:block;
position: absolute;
top: 1.5em;
z-index: 1;
}
Non dimentichiamoci che il posizionamente assoluto di un elemento ha come
requisito il posizionamento relativo dell'elemento contenitore:
a:hover { position: relative; }
La proprietà topè stata impostata ad 1.5em affinché la distanza sia
relativa alla dimensione del testo. è possibile posizionare il tooltip anche
tramite bottom o con un altro valore di top: la scelta di questo esempio è
stata dettata unicamente da motivi pratici, ma visto che comunque il tooltip
dipende da un elemento testuale è sempre consigliabile riferirsi ad esso con
misure relative (per prevenire scorrette visualizzazioni in caso di
text-resize da parte dell'utente, ad esempio). Ecco il lavoro svolto fino ad ora.
Abbellimenti
Il tooltip è pronto e funzionante, ma ovviamente manca ancora di un tocco
grafico in più. è possibile ad esempio aggiungere un bordo e un colore di
sfondo:
a:hover span {
background: #ffff99;
border: 1px solid #ccc;
display:block;
position: absolute;
top: 1.5em;
z-index: 1;
}
È possibile poi aggiungere effetti più complessi come bordi arrotondati, o
anche una piccola freccia per rendere l'effetto fumetto. Per farlo però siamo
costretti ad appesantire il markup:
<a href="#">Tooltip
<span class="tt-container">
<span class="tt-arrow"></span>
<span class="tt-text">Testo</span>
</span>
</a>
Abbiamo racchiuso il nostro tooltip dentro ad uno span contenitore
(.tt-container), poi, oltre allo span che contiene il testo, ne è stato
aggiunto un altro per contenere una freccia (.tt-arrow). L'aggiunta delle
classi è necessaria per poter applicare gli stili sugli span in modo
indipendente. Vediamo il CSS:
a:hover span.tt-container {
display:block;
position: absolute;
top: 3em;
z-index: 1;
}
Il posizionamento applicato al contenitore è molto più basso rispetto a
quello che abbiamo impostato nell'esempio precedente, per poter fare spazio
alla freccia:
a:hover span.tt-arrow {
background-image:url(images/tooltiparrow.gif);
height: 15px;
left: 15px;
position: absolute;
top: -15px;
width: 15px;
}
width e height sono impostate quanto le dimensioni dell'immagine
tooltiparrow.gif, il top è negativo per spingerla verso l'alto fuori dal
container, il left serve per spostarla orizzontalmente. Con qualche altro
piccolo ritocco ecco l'esempio all'opera.
Conclusioni
I tooltip appena presentati sono in puro CSS. Ricorrere a Javascript per
ottenere gli stessi effetti comporta il vantaggio che non si è costretti ad
appesantire il markup con span annidiate e classi. Esistono tuttavia
situazioni in cui è più pratico ricorrere al solo uso dei fogli di stile che
appoggiarsi ad un linguaggio di scripting.
La compatibilità cross-browser è ottima: gli esempi sono stati testati
contestati con Firefox 1.5+, IE6+, Opera 8+. Trovate tutto quanto visto in questo pacchetto zip.
