Tooltip básico con css

Hay veces en que no vale la pena utilizar javascript o scripts muy concretos para funciones básicas de una web. Con una línea de html y cuatro o cinco de css, es posible crear un tooltip, que en más de una ocasión nos será más que suficiente.

Es línea de código html es más que suficiente para crear nuestro tooltip básico

1
<a href="#" class="tip">enlace<span>Este es el tip.Se puede añadir <strong>html</strong>, aunque no <u>conviene</u> <i>abusar mucho</i> de él</span></a>

Nuestro objetivo es ocultar el <span> dentro del enlace y mostrarlo al pasar el ratón por encima del mismo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
a.tip {
position:relative;
color: #006699;
text-decoration:underline;
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
}
a.tip:hover {
color: #cc0000;
text-decoration:underline;
}
a.tip span {
position:absolute;
display: none;
left: 0px;
top: 10px;
width: 180px;
height: auto;
padding: 10px;
padding-top: 20px;
color: #003366;
background: url(tip.gif) left top no-repeat;
border-bottom: 1px solid #006699;
cursor: default;
}
a.tip:hover span {
position:relative;
display: block;
padding: 0;
margin:0;
background: none;
border: 0px none;
cursor: default;
}

a.tip_demo span span, a.tip_demo:hover span span {
position:relative;
display: inline;
left: auto;
top: auto;
width: auto;
height: auto;
padding: 0;
color: #000;
background: none;
border: 0px none;
cursor: default;
}

[ descargar imagen de fondo del css ]

Ejemplo del tooltip

En este texto podemos encontrar Enlaces con tooltips ocultos que además soportan el uso de los tag más frecuentesnegrita, cursiva, texto con color y hasta imágenes si nos trabajamos bien el css

4 comentarios.


  • 19 de mayo de 2008 a las 0:35
    Xoan Sousa dice...
    Me gusta esto para el picknroll. Un saludo y gracias por el link en Webs Amigas. Si kieres meter publicidad en un banner o algo avisame. Un saludo para todos!
    Responder

  • 19 de mayo de 2008 a las 0:52
    cmacias dice...
    Jejeje, ya hablaremos, ya, que igual para el mes estamos por ahí de visita ;)
    Responder

  • 29 de julio de 2010 a las 12:06
    salvador tojo dice...
    buen post.
    Aunque lo interesante, para mi, seria poder poner un enlace dentro del tooltip, ni idea de como por que se descuadra completamente.
    De todas formas he aprendido lo de poner una imagen para imitar una flecha.
    Responder

  • 29 de julio de 2010 a las 13:00
    cmacias dice...
    Todo es cuestión de cambiar los "tag" originales (en vez de un span un em, por ejemplo) por los que nos convengan. De todas formas, para colocar un enlace, podrías redefinir los comportamientos dentro del enlace principal.
    Responder
Deja tu comentario