CSS: una semplice tooltip pienamente personalizzabile

Senza dove necessariamente ricorrere a sofisticate librerie Javascript, basta utilizzare i CSS per ottenere una tooltip di cui possiamo settare l'aspetto usufruendo di tutti gli strumenti messi a disposizione dai fogli di stile.

Ecco il codice CSS:

    [style type="text/css" media="screen" ]    
    p {
    padding:40px 80px;
   }  
     
    a {
    z-index:10;
    text-decoration: none;
    }
    
    a:hover {
    position:relative;
    z-index:100;
    }
    
    a span {
    display:none;
    }
    
    a:hover span {
    display:block;
    position:absolute;
    float:left;
    white-space:nowrap;
    top:-2.2em;
    left:.5em;
    background:#ddd;
    border:1px solid #333;
    color:#fff;
    padding:1px 5px;
    z-index:10;
    }    
    [/style]

Nel nostro HTMl, semplicemente aggiungiamo lo span  che contiene il testo da mostrare nella tooltip

[p][a href="#"]Link [span]testo della tooltip[/span][/a>[/p]