Crear tooltips usando CSS

Los tooltips son esos cuadraditos de texto que aparecen al dejar el ratón sobre algún elemento ya sea de una pagina web o de cualquier programa y dan alguna información de que es o de como usarlo.

En HTML se pueden crear estos mensajes usando el atributo title y poniéndole el texto que se quiera, en la palabra tooltip en negrita puedes ver el ejemplo del uso de este atributo.

<!-- Codigo para generar el tooltip en una etiqueta cualquiera-->
<strong title="Un tooltip (también llamada descripción emergente) es una herramienta de ayuda visual, que funciona al situar el cursor sobre algún elemento mostrando, gráfico una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.">tooltip</strong>

Así de sencillo es pero el aspecto tampoco es que sea muy bueno y es probable que no quede bien con el estilo de tu web o que quieras introducir un enlace, una imagen o cualquier elemento en el tooltip y esto con el atributo title no se puede hacer. Vamos a ver lo se sencillo que es hacerlo usando solo CSS (Aquí puedes ver como hacerlo usando javaScript para generar el tooltip y hacerlo más «sencillo»).

El código HMTL necesario es el siguiente:

<div class="cssToolTip">
    Lo que se muestra
    <span> Este es el texto del tooltip </span> 
</div>

Simplemente hace falta una etiqueta en la que se puedan meter otras dentro (div, span, p, a o la que tu quieras) y dentro de esta introducimos otra como por ejemplo span y dentro de esta el texto que ira en el tooltip. Tanto lo que se muestra como el que será el texto del tooltip puede ser cualquier etiqueta o conjunto de etiquetas.

El estilo pues como es de suponer cada uno pondrá lo que le parezca aunque para ver lo que se puede hacer creo que este esta bastante bien.

/* Clase que tendra el tooltip */

.cssToolTip {
    position: relative; /* Esta clase tiene que tener posicion relativa */

    color: #ff8c00; /* Color del texto */
    
}

/* El tooltip */

.cssToolTip span {
    background: rgba(20,20,20,0.9) url('img/info.gif') center left 5px no-repeat; 
    border: 2px solid #87cefa;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #333;
    color: #87cefa;
    display: none; /* El tooltip por defecto estara oculto */

    font-size: 0.8em;
    padding: 10px 10px 10px 35px;
    max-width: 6000px;
    position: absolute; /* El tooltip se posiciona de forma absoluta para no modificar el aspezto del resto de la pagina */

    top: 15px; /* Posicion apartir de la parte superior del primer elemento padre con posicion relativa */

    left: 100px; /* Posicion apartir de la parte izquierda del primer elemento padre con posicion relativa */

    z-index: 100; /* Poner un z-index alto para que aparezca por encima del resto de elementos */

}

/* El tooltip cuando se muestra */

.cssToolTip:hover span {
    display: inline; /* Para mostrarlo simplemente usamos display block por ejemplo */

}

Aunque las hojas de estilo ya de por si son fáciles de entender y además esta comentada para que se vea más claro, por si acaso comento que la clase cssTooltip tiene que tener posición relativa ya que el tooltip (.cssToolTip span) se debe posicionar de forma absoluta para que aparezca en otro nivel y no descoloque el resto de la pagina y si cssTooltip no tuviese posición relativa la posición del tooltip seria con respecto a la ventana del navegador.

También hay que tener cuidado de que el tooltip este por defecto oculto y que solo se muestre cuando se pone el raton encima del elemento en cuestión. No se podría usar ni opacity ni visibility porque aunque el tooltip este posicionado de forma absoluta y aparentemente de igual que ocupe espacio o no lo ocupe con tal de que no se vea no es cierto pues si debajo del tooltip quedase un botón, un enlace u otro tooltip por ejemplo no lo prodríamos usar ya que el tooltip lo bloquearia al estar por encima de el aun en el caso de que no se estuviese mostrando (visility:hidden; u opacity:0;).

Dos ejemplos para que veas como queda, aunque puedes darle el estilo que se te ocurra cambiando el CSS.

bla,bla, bla,


En el tooltip puede haber enlaces, un enlace, inputs o lo que tu quieras.

bla,bla, bla.

El código del primer ejemplo es el más arriba y el del segundo es este:

<span class="cssToolTip">
    <input type="text" placeholder="Esto tiene un tooltip"> 
    <span> En el tooltip puede haber enlaces, <a href="#">un enlace</a>, inputs <input type="text"> o lo que tu quieras. </span> 
</span>

Si te fijas en el primero de los dos ejemplos como el elemento contenedor es un div (un elemento de bloque) si pones el ratón en cualquier parte de esa línea se muestra el tooltip y si limitas el ancho del elemento o usan un elemento en línea como en el segundo ejemplo y quieres que se muestre más ancho tienes establecer el ancho que quieras que tenga (En la versión de esto usando javaScript, no hay estos problemas porque hay cosas que se pueden hacer de otras formas, aquí puedes ver como lo he hecho).