Sponsor: [adrotate group=”1″ banner=”1″]
Introduzione
Era un comune pomeriggio di un comune giovedì, ero al computer che pianificato alcune attività da portare avanti entro i due giorni successivi e durante la settimana successiva quando un amico mi pone un quesito interessante: “come posso rendere degradabile un javascript per creare tooltip?“.
Quella domanda ha fatto accendere in me quella lampadina che qualche volta si illumina, si è azionato quel meccanismo assurdo chiamato logica che scava nei meandri della memoria e della conoscenza per trovare risposte ad altri problemi che ti conducono poi a scoprire che in realtà quello che stai cercando è la soluzione al tuo quesito! Ed infine la trovi!
Alla base fu CSS
La prima cosa che ho pensato per poter creare un tooltip è stato: se non posso usare javascript devo sfruttare i CSS (un po’ come dire se non è zuppa è pan bagnato!).
Poi mi sono fatto un’altra domanda: ma conviene? La risposta è stata affermativa… altrimenti non avrei scritto questo breve tutorial!
Queste sono state le considerazioni che ho fatto quando ho valutato l’effettiva validità della soluzione:
- Con javascript posso creare infiniti effetti di comparsa del menu, con i CSS no.
- Con javascript posso creare un cursore che segue il movimento del mouse, con i CSS no.
- Con javascript devo verificare che il codice che scrivo abbia lo stesso effetto su Internet Explorer 5.5, 6 e 7, su Firefox, su Konqueror, Safari, Camino, Mozilla, Netscape, Opera con i CSS, utilizzando caratteristiche standard, no.
- Senza javascript le informazioni del tooltip sono sempre presenti sulla pagina (quindi informazioni indicizzabili dai motori di ricerca)
- Senza javascript l’accessibilità in quelle realtà dove non sono abilitati gli script o non sono affatto contemplati (alcuni dispositivi mobili) è garantita
- Senza javascript e senza CSS l’informazione è sempre disponibile e l’utente non è vincolato all’utilizzo di una tecnologia specifica per fruire la pagina e l’informazione in essa contenuta
Già solo la quarta considerazione per chi si occupa di SEO, è determinante per la scelta mentre per chi è a digiuno di javascript la terza è sicuramente una buona giustificazione. Per chi si occupa invece di accessibilità il quinto punto (ed anche il sesto) sono elementi decisionali fondamentali.
Quindi la scelta è stata ben giustificata a mio avviso!
CSS si… Ma come?
A questo punto ho dovuto pensare quale elemento consentiva di gestire su tutti i browser l’evento mouse over da CSS: la scelta è ricaduta sull’elemento A.
Si perché è l’unico elemento che viene gestito su tutti i browser allo stesso modo (o quasi) e che quindi supporta una serie di “behavior”.
Nel nostro caso dobbiamo gestire sia il mouse over (che deve mostrare l’informazione) che il mouse out (che deve nascondere nuovamente l’informazione).
L’informazione quindi sarà visualizzata quando passiamo col mouse sul link (a:hover) e dovrà scomparire quando non ci siamo più su (a:link o semplicemente a).
A questo punto giocando sulla gerarchia degli elementi in XHTML e l’assengazione di attributi ad elementi tramite classi CSS, ho ben pensato di creare un elemento SPAN (ma poteva essere anche un DIV) all’interno del tag A.
Soluzione per Internet Explorer 7
Mentre su Internet Explorer 6 sapevo che non avrebbe funzionato come tooltip a comparsa (ci sono centinaia di articoli su internet che lo confermano),
su Internet Explorer 7 ero convinto che una soluzione si poteva trovare.
Il CSS iniziale che avevo progettato era il seguente:
a{
text-decoration: none;
color: #808080;
}
a span.tooltip{
color: #404040;
border: 1px solid #808080;
background-color: #fffff0;
font-family: verdana;
font-size: 12px;
}
a.tooltip>span.tooltip{
display: none;
}
a.tooltip:hover>span.tooltip{
position: absolute;
display: block;
margin-left: 10px;
margin-top: 5px;
padding-left: 3px;
line-height: 20px;
width: 200px;
height: 100px;
}
span.tooltip>span.titolo{
margin-left: -3px;
display: block;
background-color: #404040 !important;
color: #fffff0 !important;
}
E sapevo per certo che la gerarchia trattata tramite il “>” non era in nessun modo valutata da Internet Explorer 6. Ma sulla versione 7? Allo stesso modo non viene valutata.
Faccio una prova: Provo a togliere il “>” e…Magia!!! Su Internet Explorer 7 i tooltips funzionano, e funzionano anche su Firefox e su Netscape e su Opera!!!
Provo ad acecderea lla pagina con Internet Explorer 6 (sotto suggerimento di un amico) e…. Al passaggio del mouse sul link il browser mi va in crash!
Allora ho pensato. Se così funziona per tutti tranne che per Internet Explorer 6 devo sfruttare quello che la Microsoft ha previsto: i commenti condizionali!
Ma in che modo?
Ritorno alla versione precedente del CSS (che è quello che leggete sopra) che sapevo che non faceva andare in crash Internet Explorer 6 e poi lavoro sui commenti condizionali creando una soluzione adatta solo ad Internet Explorer 7 che in tal caso era l’unico a non funzionare.
Quindi accodo a quanto avevo fatto il seguente CSS:
<!--[if IE 7]>
<style type="text/css">
a.tooltip span.tooltip{
display: none;
}
a.tooltip:hover span.tooltip{
position: absolute;
display: block;
border: 1px solid #808080;
background-color: #fffff0;
width: 200px;
height: 200px;
padding-left: 3px;
}
</style>
<![endif]-->
Formalizzando il tutto
Questo semplice script che ho sviluppato ci consente di avere dei tooltip che funzionano su Firefox, Netscape, Opera, Mozilla, Internet Explorer 7 e con qualche accorgimento anche su Internet Explorer 6, sono particolarmente accessibili in quanto non mi obbligano ad utilizzare javascript.
Questa soluzione ovviamente può essere estesa con degli script in modo da ottenere una degradabilità del tooltip ove non fosse abilitato javascript e una migliore presentazione all’utente finale qualora javascript fosse disponibile ed abilitato.