¿Qué es un tooltip?

Los tooltips son herramientas de ayuda visual las cuales funcionan al situar o pulsar con el mouse sobre algún elemento gráfico. Se suelen utilizar para proporcionar información adicional al usuario sobre un elemento concreto.

Demo

Ejemplo de TooltipEsto se mostrará al pasar el mouse sobre EJEMPLO

Crear tooltips con CSS y HTML

Crear estos bocadillos informativos con HTML y CSS es una operación muy sencilla.

  1. En la hoja de estilo definimos el color de los enlaces y el diseño del contenedor del mensaje. Por ejemplo:
    Color de los enlaces:

    a {
    font:15px Geneva, Arial, Helvetica, sans-serif;
    color:#CCCCCC;
    text-decoration:none;
    }

    a:hover {
    border-bottom: 1px dashed #CCCCCC;
    }

    Diseño del Tooltip:

    a.tooltip:hover {
    text-decoration:none;
    }

    a.tooltip span {
    display:none;
    margin:0 0 0 10px;
    padding:5px 5px;
    }

    a.tooltip:hover span {
    display:inline;
    position:absolute;
    border:1px solid #cccccc;
    background:#ffffff;
    color:#666666;
    }

  2. Código HTML de los enlaces para que funcione el tooltip:

    <a href="#" class="tooltip">EJEMPLO<span>Esto se mostrará al pasar el mouse sobre EJEMPLO</span></a>

    El truco está en que la clase tooltip asignada al span la declaramos como oculta (display:none) hasta que el ratón se posicione encima del enlace, momento en el se muestra (display:inline).