Creare un ToolTip utilizzando solo i CSS
I tooltip sono descrizioni a corredo di un testo o di un acronimo, utili per rendere ad un neofita di una materia più chiara la lettura dell'argomenti in questione.
In HTML abbiamo il tag <acronym> che da solo ottempera a questa funzionalità, semplicemente specificando un "title", come vediamo in questo articolo sull'accessibilità.
In genere i tooltip animati, che non utilizzino solo gli elementi messi nativamente a disposizione dall'HTML, vengono realizzati in Javascript, onde renderli graficamente più accattivanti.
Vediamo invece in questo articolo come creare un tooltip utilizzando esclusivamente i CSS.
Vediamo un esempio di testo che associa all'acronimo CSS la sua dicitura completa:
<div> Usa i fogli di stile <a href="#" class="ToolTip">CSS<acronym>Cascading Style Sheets</acronym></a> Per stilizzare le tue pagine Web! </div>All'interno di un tag <a> utilizziamo il tag <acronym> in cui sciogliamo l'acronimo in questione, e qui sta tutto il meccanismo dell'oggetto di questo articolo.
Prima di passare al codice CSS, guardiamo un'anteprima del risultato finale del nostro tooltip:
div
{
font-size: 13px;
font-family: verdana;
}
a.ToolTip
{
color: #000000;
text-decoration: none;
cursor: help;
border-bottom: dashed 1px #000000;
}
a.ToolTip acronym
{
display: none;
}
a.ToolTip:hover acronym
{
display: block;
position: absolute;
top: 20px;
left: 30px;
background: #EEEEEE;
font-style: italic;
padding: 5px 5px 5px 5px;
border: solid 1px #DDDDDD;
}
a.ToolTip:hover
{
position: relative;
}
Il senso del codice è chiaro e semplice: ogni elemento <acronym> presente all'interno di un link a cui assegnamo la classe ToolTip sarà per default invisibile e comparirà solo al mouseover sul link di riferimento.
