Tooltip con css y sin javascript
Inicio > Blog > Tooltip con css y sin javascriptEste es mi primera entrada sobre diseño y programacion web. Lo que voy a explicar es como hacer el famoso Tooltip con css y sin javascript.
El tooltip es un bocadillo con texto o imagenes que aparece al situar el puntero del raton encima del enlace, normalmente se hace con javascript pero hoy lo voy a explicarhacerlo solo con css. Aqui muesto el codigo del mas sencillo pero lo puedes modificar a tu gusto e incluso incluir imagenes de fondo.
Explicacion
El enlace tiene la position:relative; para que el tooltip salga al lado y no en otra posicion. El span esta oculto, para que aparezca hay que pasar el cursor del raton por encima del enlace y a este se da el estilo como se necesite como la distacia pasa decirle donde aparecer, el borde, el fondo,…
Codigo html
<a href="#">Enlace ejemplo 1 <span>Lorem Ipsum, texto de relleno.</span> </a>
Codigo Css
a { position:relative; } a span { display: none; } a:hover { color: #555555;} a:hover span { display:block; position:absolute; top:17px; left:0px; width:200px; color: #000000; text-align: center; font-weight:normal; padding: 1px 2px; background-color:#EFEFEF; border:#CCCCCC solid 1px; }
En el ejemplo se ha insertado en algunos imagenes y que este en un lado y abajo del enlace.
Si quieres ver como funciona pulsa aqui. Descargate el ejemplo pulsando aqui.