disign.it | CSS: una semplice tooltip pienamente personalizzabile | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 4.314 visualizzazioni

CSS: una semplice tooltip pienamente personalizzabile

21/11/2011

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]

← Javascript: generare una stringa alfanumerica random Javascript: funzione sostitutiva htmlentities →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.