Un tooltip desde un atributo en CSS

La etiqueta vive en el markup y el pseudoelemento la renderiza.

.tip { position: relative; }

.tip::after {
  content: attr(data-tip);
  position: absolute;
  inset-block-end: calc(100% + 0.4rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  padding: 0.25rem 0.5rem;
  background: #0f172a;
  color: white;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms ease;
}

.tip:hover::after,
.tip:focus-visible::after { opacity: 1; }

Cómo funciona

1. content: attr(data-tip) saca el texto del atributo.
2. El tooltip se posiciona contra un padre con position: relative.
3. Un tooltip solo de CSS es decoración; uno de verdad necesita también el nombre accesible.

Palabras clave y builtins usados aquí

• attr
• background
• calc
• color
• content
• ms
• opacity
• padding
• position
• rem
• transition
• translate

El intento, en números

Líneas

19

Caracteres a escribir

379

Tokens

102

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 72 segundos.

Escribe este fragmento

Paso 4 de 4 en Superficies; paso 6 de 13 en Dar estilo a componentes.

← Anterior Siguiente →