In questo articolo vedremo come sia possibile creare dei tooltip con i CSS.
Un tooltip è un testo di supporto che compare al passaggio del
mouse su un link.
La mia idea dei tooltip interamente basati sui CSS risale a un po' di tempo
fa, ed è derivata dai Pure
CSS popups di Eric Meyer, una tecnica veramente geniale che mi ha appassionato
a tal punto da spingermi allo studio dei fogli di stile. Si tratta di una tecnica
che consente di avere effetti dinamici su una pagina senza l'uso di Javascript,
ma solo con i fogli di stile. Vedremo però che l'utilizzo esclusivo dei CSS ha
dei forti vincoli a livello di codice HTML. Nulla da temere, con un pizzico di
Javascript si possono aggiustare le cose. Vediamo subito ciò che andremo
a realizzare: ecco un esempio di tooltip con fogli di stile.
La versione solo CSS
La tecnica dei tooltip con i CSS è molto semplice: all'interno di un link si dispone
uno span con il testo di supporto. Vediamo subito il codice HTML:
<a href="http://jigsaw.w3.org/css-validator/">Il validatore CSS
<span>link diretto al validatore W3C</span>
</a>
Attraverso i fogli di stile questo testo è visibile solo allo stato :hover
del link, in posizione assoluta rispetto ad un antenato posizionato del link stesso,
nel caso dell'esempio di Eric Meyer sotto il menu. Per i tooltip invece, il testo
di supporto verrà posizionato rispetto al link che lo contiene, aggiungendo semplicemente
position: relative, che ci consente di
referenziare lo span (e quindi il tooltip).
Vediamo per prima cosa gli stati normale e hover dei link.
a{ position:relative; /*questa è fondamentale*/
z-index:24; background-color: #ccc;color: #000;
text-decoration: none}
a:hover{ z-index: 25; background-color: #ff0}
Le due dichiarazioni sullo z-index sono necessarie per risolvere
uno strano comportamento di Internet Explorer: il tooltip quando viene mostrato,
si dispone sotto i link. Attraverso le dichiarazioni sullo z-index, lo span
erediterà dal link in stato hover lo z-index e si disporrà quindi sopra
eventuali altri link adiacenti in stato normale.
Inoltre, lo stato hover deve avere almeno un cambiamento di proprietà per
consentire la visualizzazione dello span su IE: l'unica regola possibile sembra
sia background-color.
Ora passiamo agli stili sullo span.
Se un link è in stato normale, esso viene semplicemente nascosto; verrà mostrato
solo in stato hover dei link. Ecco le due regole:
a span{display: none}
a:hover span{ /*lo span verrà mostrato solo sullo stato :hover */
display: block; position:absolute;
top: 2em; left: 2em; width: 15em;
border: 1px solid #0cf; background-color: #cff; color:#000;
text-align: center}
Ecco cosa abbiamo ottenuto con un po' di
HTML extra e i fogli di stile. Ovviamente ci si può divertire con bordi, colore
e font dei tooltip per adattarli alle proprie esigenze.
Compatibilità dei tooltips con i Css
La compatibilità dei tooltips con i CSS è buona: funzionano infatti con Internet
Explorer 5, 5.5 e 6, tutte le versioni di Mozilla e i browser Gecko-based, e su
Opera, con qualche problema di visalizzazione, dalla versione 7.
Un piccolo difetto, purtroppo rimasto irrisolto, è che quando il link si dispone su due righe,
il tooltip compare sulla prima riga.
Imparare a valutare cosa facciamo
Nel nostro lavoro e in qualsiasi forma espressiva o creativa, una cosa essenziale
è sviluppare capacità di valutazione oggettiva e senso critico. Nel webdesign
non contano solo l'estetica e gli effetti speciali.. ed è solo grazie allo studio
e all'applicazione che un buon webdesigner riesce ad essere oggettivo su aspetti
tecnici e implementativi.
Pure Css Popups, e quindi i Css Tooltips che ne sono derivati, sono due tecniche
veramente affascinanti e quasi didascaliche se valutate solo sotto l'aspetto dei
fogli di stile: consentono effetti possibili altrimenti solo con molte righe di
Javascript. Nell'esempio
avrete notato che i link commentati con i tooltips possono risultare veramente
efficaci come aiuto nella navigazione. Ma...
L'attributo title, la semantica del codice e l'accessibilità
Una buona norma di accessibilità e usabilità è fornire l'attributo title
per i link, orientando l'utente alla navigazione. L'attributo title
è opzionale, ma altamente consigliato; ecco alcuni approfondimenti decisamente
interessanti:
Inoltre, c'è da valutare sempre, nella scrittura di codice HTML, quali tag
e attributi usiamo e perchè. È una questione, con una parola molto diffusa
ultimamente, semantica. Per rendere l'idea: è vero che si può aprire
una bottiglia di birra con un accendino, ma è sicuramente meglio un apribottiglie.
Non c'è nessun motivo semantico per realizzare un tooltip attraverso uno span
all'interno di un link, quando l'attributo title
è stato pensato proprio per questo motivo. Provate a vedere la
stessa pagina senza fogli di stile. Risulta ancora così accattivante e soprattutto
leggibile? Con lo stesso testo risulterà la pagina, anche con i fogli di stile,
se visualizzata in un browser testuale. Inoltre, screen reader come Jaws leggeranno
il testo all'interno dello span, probabilmente
facendolo intendere parte del link.
Javascript e DOM in soccorso
Javascript, e in particolare il Document Object Model, ci consentono
di accedere e manipolare elementi e attributi di una pagina HTML. Attraverso il
DOM è quindi possibile reperire l' attributo title
di un link e trasformarlo in tooltip. L'idea non è totalmente nuova: ci ha già
pensato Stuart Langridge creando i Nice
Titles. L'approccio di Langridge è decisamente differente: anche se combina
CSS e Javascript, la parte di scripting è predominante (si tratta infatti di ben
216 righe di Javascript, in cui la maggior parte del codice è per posizionare
il tooltip attraverso Javascript, con conseguente necessità di gestirlo in base
al browser). La versione dei tooltip che ho preparato conta solo una ventina di
rige di Javascript.
L'HTML risulta decisamente migliore rispetto alla versione
solo CSS, dato che si usa un semplice attributo title:
<a href="http://jigsaw.w3.org/css-validator/" title="link diretto al validatore W3C">Il validatore CSS
</a>
Il CSS è elementare e svincola il foglio di stile dai due
trucchi necessari a Internet Explorer per funzionare. Sarà necessario infatti
preparare solo una semplice classe tooltip in cui si dichiarano
le proprietà del nostro tooltip:
.tooltip{ /*il resto è compito di javascript */
position:absolute;
top: 2em; left: 2em; width: 15em;
border: 1px solid #69C; background-color: #A8F8D0; color:#000;
font-size: 80%;text-align: center}
Vediamo il codice Javascript: questo si occupa di ricercare tutti i link nella
pagina HTML con attributo title, di aggiungere
il tooltip (che questa volta è un em) grazie al DOM e di gestire
la visualizzazione del tooltip in fase hover del link grazie agli eventi. Se non
siete pratici di Javascript, passate oltre tranquillamente: non vi è necessario
capirlo per poter disporre dei tooltip con CSS e DOM.
window.onload=enableTooltips;
function enableTooltips(){
var links=document.getElementsByTagName("a");
for(i=0;i<links.length;i++){
t=links[i].getAttribute("title");
if(t!=""){
links[i].removeAttribute("title");
links[i].style.position="relative";
tooltip=document.createElement("em");
tooltip.className="tooltip";
tooltip.style.display="none";
tooltip.appendChild(document.createTextNode(t));
links[i].appendChild(tooltip);
links[i].onmouseover=showTooltip;
links[i].onmouseout=hideTooltip;
}
}
}
function showTooltip(event){
this.style.zIndex="25";
this.getElementsByTagName("em")[0].style.display="block";
}
function hideTooltip(event){
this.style.zIndex="24";
this.getElementsByTagName("em")[0].style.display="none";
}
Il risultato
Visto l'HTML, i CSS e il Javascript, non ci resta che vedere il
risultato, a parte i colori, che ho volutamente cambiato, la resa è praticamente
uguale alla versione interamente basata sui CSS. Ma il codice è decisamente migliore.
Proviamo infatti a vedere la pagina senza css e senza
Javascript: è decisamente usabile, ci sono gli attributi title
e i testo dei link è chiaro.
Ora vediamo come sarebbe la pagina con Javascript
disabilitato ma con i CSS: anche qui ci sono i title e le regole sul tooltip
non interferiscono. Bisogna considerare infatti che una 10% circa degli utenti
internet ha Javascript disabilitato.
Aggiungere i tooltip ad una qualsiasi pagina
Per aggiungere i tooltip con CSS e DOM alle vostre pagine ci sono alcuni prerequisiti
necessari:
- i link, almeno quelli più significativi, dovranno avere l'attributo title
per far sì che i tooltip vengano visualizzati; - i link con title non dovranno essere
posizionati assolutamente, dato che è necessario che siano posizionati relativamente; - i link con title non dovranno contenere
elementi di testo em al loro interno.
Se queste piccole condizioni sono rispettate ci sono solo pochi semplici passi da fare. Qui di seguito ci
sono i link per scaricare i file css e javascript. Vi basterà cliccare con il tasto destro del mouse per salvarli
sul vostro computer:
Una volta salvati, per incorporarli nel codice html vi basterà aggiungere le seguenti dichiarazioni nella sezione
head delle vostre pagine:
<style type="text/css">
@import url('tooltip.css');
</style>
<script type="text/javascript" src="tooltip.js"></script>
Ed il gioco è fatto. Da notare che dimensioni, colore e testo del tooltip si
possono facilmente modificare agendo solo sul CSS. E che il Javascript si occupa
di tutto il resto, senza necessità di modifiche. Buon divertimento.
