Como hacer un Tooltip con Css

Hay muchas maneras de crear un Tooltip personalizado con CSS dependiendo de que tipo de Tooltip queramos, en este artículo mostrare dos formas.

- Mostrando una imagen, texto, URL


<!DOCTYPE HTML>             

<style type="text/css">
    .franz{
        position:relative;
    }

    .franz span{
        display:none;
    }

    .franz:hover span{
        display:block;
        position:absolute;
        top:-30px;
        left:25px;
        border:1px solid black;
        background:olive;
        width:300px;
    }
</style>

<span class="franz">
    <label>Esto es un ejemplo</label>
    <span>Texto que aparece !</span>
</span>

Detalle del código anterior :
  • La línea 1 es necesaria para que funcione en todas las etiquetas el selector hover en IE7. 
  • En la línea 26 se pone el texto que va aparecer y desaparecer. 
  • En la línea 25 está el texto en donde tenemos que pasar el cursor para que aparezca el tooltip. 
  • De la línea 9 a 11 indica que el texto que aparecerá y desaparecerá comenzará como invisible("display:none"). 
  • De la línea 13 a 21 indica que cuando pongamos el cursor sobre el texto indicado en la línea 25 el tooltip aparecerá("display:block") y cuando la quitemos desaparecerá. 
  • la línea 15 indica que el elemento debe ser de posición absoluta con respecto al "span" de la línea 24. 
  • En la línea 26 también se pudo poner en vez de una etiqueta "span" una etiqueta img con la imagen que queramos("<img src='miImagen.jpg' />") , claro que deberíamos cambiar el valor de top y left de la línea 16 y 17 para acomodar bien la imagen donde queramos y también la línea 13 cambiandolo a " .franz:hover img " .
Demostración:
Texto que aparecerá          ----->  Aparece un texto cuando se pasa por encima el cursor

-Mostrando una imagen con un texto interno

Ejemplo:
<!DOCTYPE html>

<style type="text/css">
span.franz{ 
    position: relative;
}

span.franz span{
    display: none;
}

span.franz img{
    display: none;
}
 
span.franz:hover img{
    display: block;
    position: absolute;
    top: -65px;
    left: -30px;
}
 
span.franz:hover span.frtool {
    display: block;
    position: absolute;
    top: -50px;
    left: -15px;
}
</style>

<span class="franz">
    <label>Franz Tooltip</label>
    <img src="Imagen.png" >
    <span class="frtool">¡Hola que tal!</span>
</span>
Demostración:
Franz Tooltip ¡Hola que tal!----->  Aparece un texto cuando se pasa por encima el cursor

2 comentarios: