Tooltips

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 23 de 35.

Los tooltips son elementos emergentes pequeños e informativos que aparecen cuando un usuario se desplaza sobre un elemento de la interfaz o se enfoca en él. Proporcionan contexto adicional sin saturar la interfaz de usuario principal.

Vamos a crear un tooltip básico usando HTML y CSS:

Primero, crea la estructura HTML:

<div class="tooltip-container">
  <button>Hover over me</button>
  <span class="tooltip">This is a tooltip!</span>
</div>

A continuación, añade el CSS para posicionar y mostrar/ocultar el tooltip:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden; 
  /* Position the tooltip */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Add a slight delay before showing */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip when hovering over the container */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Con este código, cuando pases el cursor sobre el botón, aparecerá una descripción emergente (tooltip) encima de él.

Desafío

Fácil

Se te proporciona un botón HTML con un tooltip que aparece cuando el usuario pasa el cursor sobre el botón "Help". Tu tarea:

Oculta el tooltip por defecto.
Añade un color de fondo y un color de texto para que destaque.
Centra el texto dentro del tooltip.
Añade algo de padding para que el tooltip se vea mejor.
Redondea las esquinas con border-radius.

Hoja de referencia

Los tooltips son pequeños elementos emergentes informativos que aparecen al pasar el cursor sobre los elementos de la interfaz.

Estructura HTML básica:

<div class="tooltip-container">
  <button>Hover over me</button>
  <span class="tooltip">This is a tooltip!</span>
</div>

CSS para posicionar y mostrar/ocultar tooltips:

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  visibility: hidden; 
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Tooltips</title>
  <style>
    .tooltip-container {
      position: relative;
      display: inline-block;
      margin: 50px;
    }
    
    button {
      padding: 8px 16px;
      cursor: pointer;
    }
    
    .tooltip {
      
      /* Animation properties */
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    /* Show the tooltip when hovering over the container */
    .tooltip-container:hover .tooltip {
      visibility: visible;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="tooltip-container">
    <button>Help</button>
    <span class="tooltip">Click for assistance</span>
  </div>
</body>
</html>