Una manera senzilla de crear un text emergent, o pop up / rollover, usant només CSS (sense programació, javascript...) és la següent:
Hem d'englobar el text amb dugues classes (o ID). Usarem .rollover pel text a emergir i .rollover_activador pel text que ha de fer saltar el text emergent.
<span class="rollover_activador">[i]<span class="rollover">Text emergent</span></span>
I al nostre fitxer .css usarem els següents estils:
.rollover{
display:none;
}.rollover_activador{
position: relative;
}.rollover_activador:hover .rollover{
display:inline;
position: absolute;
z-index: 10;
background-color: yellow;
}
Senzill, oi? després només hem d'acabar de donar-li el look que volguem...
Actualització 20120802: via Linkedin he trobat una manera diferent i, al meu entendre, més simple, de fer-ho:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.rollover:hover {
cursor:pointer;
color:red;
}
.rollover:hover:before {
content:"este";
}
</style>
</head>
<body>
<span class="rollover"> ejemplo</span>
</body>
</html>