Tooltip CSS

Creación de tooltips con CSS.

Un Tooltip es a menudo utilizado para especificar información adicional sobre algo cuando el usuario mueve el puntero del mouse sobre un elemento.

Tooltip Básico

En el siguiente ejemplo, se muestra la creación de un tooltip que aparece cuando el usuario mueve el puntero del mouse sobre un elemento:

<style>
  /* Contenedor del tooltip */
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    /* esta última si se desean puntos debajo del texto */
  }

  /* Texto del Tooltipo */
  .tooltip .tooltiptexto {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #ffffff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Posición del texto */
    position: absolute;
    z-index: 1;
  }

  /* Muestra el texto del Tooltip */
  .tooltip:hover .tooltiptexto {
    visibility: visible;
  }
</style>
<div class="tooltip">
  Puntero del mouse aquí
  <span class="tooltiptexto">Texto del Tooltip</span>
</div>

Explicando el ejemplo:

HTML: Se usa un elemento contenedor como <div> y se establece su clase como: class="tooltip". Cuando el usuario mueve el puntero del mouse sobre este elemento <div>, mostrará el texto del tooltip. El texto del tooltip es colocado dentro de un elemento del tipo inline, como <span> y se establece su clase como: class="tooltexto".

CSS: A la clase "tooltip" se le especifica position: relative; lo cual es necesario para la posición de la clase "tooltiptexto" en la especificación position: absolute;.

La clase tooltiptexto contiene el texto del tooltip y de forma predeterminada se le oculta con la especificación visibility: hidden; y se hace visible con la especificación de la pseudo-clase :hover con visibility: visible;, que ocurrirá cuando el usuario mueva el puntero del mouse sobre el elemento con la clase "tooltip".

También se agregaron algunos estilos básicos para el ancho de 120 pixeles, color de fondo negro, color de texto blanco, texto centrado y relleno de 5px superior e inferior. La propiedad border-radius es usada para redondear las esquinas del "tooltiptexto".

Posicionamiento de los Tooltips

En el siguiente ejemplo, el tooltip es mostrado a la derecha de su elemento <div> contenedor, especificándole left: 105%; y top: -5px; :

left: 105%; : significa que basando en el limite del izquierdo de su contenedor (<div>), lo posicionará 105% a la derecha, es decir, 5% más del 100% del ancho, colocándolo así 5% a la derecha de donde termina su contenedor (div).
top: -5px; : se especifica el número 5 porque "tooltiptexto" tiene un relleno superior e inferior de 5 pixeles. Esto es solo para fines de ajustarlo al centro de su contenedor en este ejemplo, pero este valor es de acuerdo a las necesidades del contenedor y del relleno de dicho tooltiptex o es libre de ajustarlo a su deseo donde colocarlo.

.tooltip .tooltiptexto {
  /* ... las otras propiedades
  ya declaradas ... */
  top: -5px;
  left: 105%;
}

O si se desea que sea mostrado a la izquierda de su elemento <div> contenedor, especificándole right: 105%; y top: -5px; de igual manera:

.tooltip .tooltiptexto {
  /* ... las otras propiedades
  ya declaradas ... */
  top: -5px;
  right: 105%;
}

Sí se desea que el tooltip se muestre en la parte superior de su <div> contenedor, se muestra el siguiente ejemplo:

.tooltip .tooltiptexto {
  /* Aquí van las otras propiedades
  ya declaramos anteriormente ... */
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  /* usamos la mitad del ancho dado que
  120/2 = 60 , para centrar el tooltip */
}

Nótese que se uso la propiedad margin-left con un valor de menos 60 pixeles; esto es para centrar el tooltip de su <div> contenedor, dado que la de su ancho es 120 entre 2 es igual 60.

Sí se desea que el tooltip se muestre en la parte inferior de su <div> contenedor, se muestra de igual manera el siguiente ejemplo:

.tooltip .tooltiptexto {
  /* Aquí van las otras propiedades
  ya declaramos anteriormente ... */
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

Tooltip con flecha

Para crear una flecha que debe aparece desde el lado especifico del tooltip, se agrega un contenido después del tooltip, con el pseudo-elemento ::after junto con la propiedad content. La flecha en sí es creada usando bordes. Esto hará que el tooltipo luzca como una burbuja de dialogo.

En el siguiente ejemplo se muestra como agregar una flecha en el inferior del tooltip:

.tooltip .tooltiptexto::after {
  content: " ";
  position: absolute;
  top: 100%; /* parte inferior del tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

Explicando el ejemplo:

La posición de la flecha dentro del tooltip con top: 100%; colocará la flecha en el inferior del tooltipo y left: 50%; la centrará.

Nota: La propiedad border-width especifica el tamaño de la flecha. Sí se cambia esto, tambíén se debe cambiar el valor de margin-left a el mismo. Esto mantendrá la flecha centrada.

La propiedad border-color es usada para transformar el contenido a una flecha. Se especifica el borde superior en negro, y el resto es transparente. Sí todos los lados fueran negros, terminaría como una caja negra cuadrada.

En el siguiente ejemplo se muestra como agregar una flecha para la parte superior del tooltip. Nótese que se especifica el borde inferior en esta ocasión:

.tooltip .tooltiptexto::after {
  content: " ";
  position: absolute;
  bottom: 100%; /* parte superior del tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

En el siguiente ejemplo se muestra como agregar una flecha al lado izquierdo del tooltip:

.tooltip .tooltiptexto::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* parte izquierda del tooltip */
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

En el siguiente ejemplo se muestra como agregar una flecha al lado derecho del tooltip:

.tooltip .tooltiptexto::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* parte derecha del tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

Animación desvanecer en Tooltips

Si se desea una animación de desvanecer en un texto de tooltip cuando se encuentra visible, se puede usar la propiedad transition junto con la propiedad opacity, y va desde completamente invisible al 100% visible, en un número de segundos especificados:

.tooltip .tooltiptexto {
  opacity: 0;
  transition: opacity 1s;
}
.tooltip:hover .tooltiptexto {
  opacity: 1;
}