Cómo hacer un Tooltip con CSS

Los tooltips son elementos emergentes cuando el cursor se posiciona sobre el elemento que lo dispara.

De forma nativa HTML cuenta con una propiedad que permite mostrar estos elementos sin necesidad de CSS, si colocas esto en tu documento HTML:

<span title="Soy un tooltip">Elemento</span>

Ahora cuando el cursor pase sobre ese elemento aparecer un tooltip así:

Esta no es la única forma de obtener un tooltip, también podemos generar los nuestros con un poco de HTML y CSS.

Vamos a generar el HTML para nuestro Tooltip.

<div class="tooltip-one">Esto es un Tooltip</div>

Ahora le daremos estilo:

.tooltip-one {
  padding: 18px 32px;
  background: #fff;
  position: relative;
  min-width: 150px;
  max-width: 180px;
  border-radius: 5px;
  text-align: center;
  filter: drop-shadow(0 3px 5px #ccc);
  line-height: 1.5;
}

Obtendremos algo así:

Ahora vamos a agregarle una pequeña flecha para emular el estilo de los Tooltips de bootstrap. Lo haremos utilizando un pseudo elemento, esto quiere decir que no necesitamos agregar nada más de HTML.

.tooltip-one:after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  margin-left: -9px;
  width: 18px;
  height: 18px;
  background: white;
  transform: rotate(45deg);
}

y entonces obtendremos algo así:

Ahora nos falta colocar la funcionalidad que hará que aparezca cuando nos coloquemos sobre el elemento que lo dispara.

Para esto vamos a crear un contenedor padre donde insertaremos nuestro ya creado tooltip.

<div class="tooltip-container">
  <span class="tooltip-trigger">Disparador</span>
  <div class="tooltip-one">
    Esto es un tooltip
  </div>
</div>

Este contenedor además del Tooltip deberá contener al elemento que activará el Tooltip, este elemento es el único estará visible. Para lograrlo debemos agregar esto:

//contenedor
.tooltip-container {
  position: relative;
  cursor: pointer;
}

//ocultar el tooltip
.tooltip-container .tooltip-one {
  display: none;
}

Nos faltaría únicamente declarar que cuando el cursor se encuentre sobre el disparador el Tooltip debe de verse, esto lo vamos a lograr utilizando el sigo + entre el selector del disparador y el selector del tooltip; quedando así .tooltip-trigger:hover + .tooltip-one con esto controlamos todo lo que está inmediatamente después de .tooltip-one al hacerle hover y en este caso haremos que se vea el Tooltip.

.tooltip-trigger:hover + .tooltip-one {
  display: block;
}

Deberíamos de tener algo así:

See the Pen Tooltip 3 - CSS / HTML - Hover by CSS Tianguis (@css-tianguis) on CodePen.

Además hemos agregado la librería de Font-Awesome para tener el icono de pregunta, esta es una de las formas más comunes de implementar los tooltips.

Tooltips con jQuery

Si agregamos un poco de jQuery podemos lograr que nuestro Tooltip tenga mas de efectos. A continuación vamos a hacer que cuando el cursor se posicione sobre el trigger se agregue una clase que cambiará el estado del Tooltip de oculto a visible, con esta clase vamos a darle una transición que suavice la aparición de nuestro Tooltip.

Primero vamos a agregar este JS, lo podemos hacer creando un archivo aparte o colocándolo antes de que cierre la etiqueta </body>.

$(document).ready(function() {
                        
  $(".tooltip-trigger")
    .mouseenter(function() {
      $(this)
        .next(".tooltip-one")
        .addClass("is-active");
    })
    .mouseleave(function() {
      $(this)
        .next(".tooltip-one")
        .removeClass("is-active");
  });
                        
});

Lo que estamos declarando es "si el cursor se encuentra arriba de tooltip-trigger, busca al próximo tooltip-one y agrega la clase .is-active" y "si cuando el cursor ya no esté sobre tooltip-trigger, busca al tooltip-one más próximo quítale la clase is-active.

Ahora vamos a cambiar un poco el CSS de nuestro Tooltip.

.tooltip-trigger {
  /*agregamos estas declaraciones*/
  position: relative;
  z-index: 2;
}

.tooltip-one {
  padding: 18px 32px;
  background: #fff;
  position: absolute;
  width: 220px;
  border-radius: 5px;
  text-align: center;
  filter: drop-shadow(0 3px 5px #ccc);
  line-height: 1.5;
  right: 50%;
  margin-right: -110px;
  z-index: 1;
  /*nuevos cambios*/
  visibility: hidden;
  bottom: 10px;
  opacity: 0;
}

/*cambiamos la apariencia del tooltip con la clase que se agrega con jQuery*/
.tooltip-one.is-active {
  visibility: visible;
  bottom: 40px;
  transition: all .1s ease;
  opacity: 1;
}

Nótese agregamos una propiedad de posición y z-index superior al Tooltip a nuestro trigger, esto evitará que al aparecer Tooltip pueda atorarse ya que si aparece estando encima del trigger se anularía la regla de jQuery.