Può essere utile far comparire una piccola porzione di testo esplicativa quando si passa il mouse sopra ad un collegamento, una parola o un'immagine.
Senza dover ricorrere ad uno script in Javascript è possibile realizzare questo effetto utilizzando alcune regole CSS applicate a degli elementi XHTML.
Evitando di usare Javascript si ottiene un duplice vantaggio: l'effetto popup viene visualizzato anche in assenza del supporto Javascript e il testo esplicativo viene indicizzato dai motori di ricerca.

Nel seguente esempio, passando il mouse sopra ai collegamenti testuali vengono visualizzati dei rettangoli contenenti del testo esplicativo:

Codice XHTML:

<a href="#">testo link<span> testo popup</span></a>

Codice CSS:

a { position: relative; z-index: 1; }
a:hover { border: 0; z-index: 1;}
a span { display: none; z-index: 1}
a:hover span { position: absolute;  display: block; 
text-decoration: none; z-index: 99; top: -19px;  left: 19px; }

L'elemento A contiene un elemento SPAN che viene nascosto al visitatore, attraverso la regola display: none; e compare solo al passaggio del mouse sopra all'elemento A, con la regola display: block; definita in a:hover span.
La posizione dell'elemento SPAN è definita in modo assoluto e le sue coordinate left e top fanno riferimento all'elemento A, posizionato relativamente.

Per evitare che il testo contenuto nel rettangolo popup si presenti su più righe, è possibile utilizzare la regola CSS white-space: nowrap

Nella pagina seguente viene affrontato il problema del posizionamento degli elementi con il browser Opera.