Tooltip solo con CSS, accesible con teclado y lector de pantalla

Un tooltip es el globito de ayuda que aparece al pasar el ratón sobre algo. Hacerlo solo con :hover es el error más común: con el teclado nunca aparece, en el celular tampoco, y el lector de pantalla no se entera. Este ejemplo resuelve las tres cosas con CSS y dos atributos de HTML.

El código

<p class="campo">
  <label for="cvv">CVV</label>
  <input id="cvv" inputmode="numeric" maxlength="4" autocomplete="cc-csc">
  <span class="con-ayuda">
    <button class="ayuda" type="button" aria-describedby="ayuda-cvv">?</button>
    <span class="tip" role="tooltip" id="ayuda-cvv">Los 3 dígitos al reverso de tu tarjeta</span>
  </span>
</p>

body { font-family: system-ui, sans-serif; }
.campo { padding-top: 64px; display: flex; gap: 8px; align-items: center; }
input { width: 5rem; padding: 6px; }
.con-ayuda { position: relative; }
.ayuda {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #1e64af; background: white; color: #1e64af; cursor: help;
}
.tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: 14rem;
  padding: 6px 10px;
  border-radius: 6px;
  background: #0f1f33;
  color: white;
  font-size: 0.85rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
}
.con-ayuda:hover .tip,
.ayuda:focus-visible + .tip {
  opacity: 1;
  visibility: visible;
}

Pasa el ratón por el «?» o llega a él con Tab. Comprobado en los tres navegadores: sin foco, el globo está hidden; al recibir el foco del teclado pasa a visible.

Qué hace cada parte

• Un <button>, no un span: así se puede alcanzar con Tab y tocar en el celular. Un tooltip sobre algo que no recibe foco no existe para quien usa teclado.
• aria-describedby enlaza el botón con el texto del globo: el lector de pantalla lee «?, botón, Los 3 dígitos al reverso de tu tarjeta». role="tooltip" le dice qué es ese texto.
• :focus-visible muestra el globo cuando el foco llega por teclado, además de :hover para el ratón.
• visibility: hidden, no display: none, para poder animar la opacidad. El texto sigue disponible para aria-describedby aunque esté oculto.

El camino moderno: popover y anchor positioning

Los navegadores están incorporando dos piezas que hacen esto mejor: el atributo popover, que pone el globo por encima de todo (sin pelear con z-index ni con un overflow: hidden que lo corte) y se cierra con Esc, y anchor positioning, que lo coloca junto a su botón y lo voltea si no cabe. En 2026 todavía no están en todos los navegadores; mientras tanto, la versión de arriba funciona en todos.

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.