Tooltips

Parte de la sección Frontend Práctico del Journey de HTML de Coddy. Lección 23 de 35.

Los tooltips son pequeños elementos emergentes informativos que aparecen cuando un usuario pasa el cursor sobre un elemento de la interfaz o se centra en él. Proporcionan contexto adicional sin sobrecargar la interfaz de usuario principal.

Creemos 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 la información sobre herramientas:

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

.tooltip {
  visibility: hidden; 
  /* Posiciona el tooltip */
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  
  /* Añade un ligero retraso antes de mostrar */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Muestra el tooltip al pasar el cursor sobre el contenedor */
.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Con este código, cuando pases el cursor sobre el botón, aparecerá una información sobre herramientas encima de él.

Desafío

Fácil

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

Ocultar la información sobre herramientas de forma predeterminada.
Añadir un color de fondo y un color de texto para que destaque.
Centrar el texto dentro de la información sobre herramientas.
Añadir algo de relleno para que la información sobre herramientas tenga mejor aspecto.
Redondear las esquinas con border-radius.

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>