Tooltip con i CSS

Autore: Tutorialissimo
Visite: 256
Voto: 0 / 4 ( voti: 0 )

In questo tutorial vediamo un altro modo per usare i CSS in alternativa agli script. In particolare vedremo come usarli per realizzare dei tolti.

L’esempio è molto semplice ed utilizza un ragionamento simile a quello seguito in questo altro tutorial

Guarda l'anteprima di quello che realizzeremo: vai

Il codice HTML è questo:

<div class="pop"><a href="#" class="show">porta il mouse qui sopra</a><span>Lorem ipsum dolor sit</span></div>

E’ davvero molto semplice, si tratta di un div che contiene un link ed uno span, ad ognuno di questi elementi sono assegnate delle diverse classi che ora andremmo a definire.

Il CSS da collegare è questo:

div.pop { visibility: hidden;
float: left;
display: block; }

div.pop:hover { visibility: visible; }

div.pop span { color: #e1e1e1;
font-size: 11px;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
background-color: #004eb4;
position: relative;
top: 10px;
left: 10px;
float: left;
padding: 3px;
border: solid 1px #001856;
display: block; }

a.show { color: #ca0000;
font-size: 12px;
font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
visibility: visible;
float: left;
display: block; }

Oltre alle proprietà per dare un aspetto quantomeno presentabile al tutto, quello che c’è da notare sono le proprietà chiave per far si che tutto funzioni. Per quanto riguarda il div.pop la proprietà fondamentale è visibility: hidden che nasconde tutto il contenuto del livello. Così facendo, però, nascondiamo anche il link, mentre noi vogliamo che questo sia visibile, ecco allora che nel blocco di dichiarazioni che segue il selettore a.show troviamo visibility: visible. In questo modo il link resta sempre visibile, mentre il div.pop diventa visibile quando ci portiamo sopra il link: vedi il blocco di dichiarazioni div.pop:hover e nota che il link è dentro il div perciò portarci sopra il link vuol dire portarci sopra il div.

Infine in div.pop span, oltre alle solite propriatà per regolarne l’aspetto, notiamo che è stato spostato grazie alle proprietà position: relative, top: 10px e left: 10 px, questo per evitare che parte del testo venga coperto dal cursore del mouse. Dando dei valori diversi potete posizionare il tooltip dove più vi piace.

Ripeto che il tutto si può ottenere inserendo qualche script nelle nostre pagine con un risultato per certi aspetti migliore, questo metodo ha invece il vantaggio di non appesantire troppo la pagina.