Tooltip

El texto del tooltip vive en un atributo de datos y lo dibuja un pseudoelemento, así que no hay script, no hay nada que posicionar en tiempo de ejecución y no queda nada en el DOM. Aparece al pasar por encima y al recibir foco de teclado, de lo que se ocupa la mitad :focus-within de la regla.

Tooltip básico

stack({ direction: 'row', gap: 'md' },
  tooltip({ content: 'Copiar al portapapeles' },
    iconButton({
      label: 'Copiar',
      variant: 'soft',
      color: 'neutral',
      icon: icon('copy'),
    }),
  ),
  tooltip({ content: 'Recompilar el sitio' },
    button({ variant: 'outline', color: 'neutral' }, 'Recompilar'),
  ),
)

Colocación

Arriba por defecto, abajo cuando no hay sitio arriba.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Encima del disparador' },
    button({ variant: 'soft', color: 'neutral' }, 'Arriba'),
  ),
  tooltip({ content: 'Debajo del disparador', placement: 'bottom' },
    button({ variant: 'soft', color: 'neutral' }, 'Abajo'),
  ),
)

Nombres accesibles

El texto del tooltip es decoración: se dibuja desde el content de CSS, que los lectores de pantalla no anuncian de forma fiable. El control de dentro sigue necesitando su propio nombre accesible, que es lo que da el label de iconButton(). Cuando el tooltip diga algo que el nombre del control no dice, pasa label: true para repetirlo en un span oculto a la vista.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Despliega a producción de inmediato', label: true },
    button({ color: 'danger' }, 'Desplegar'),
  ),
)

Sobre texto

Un tooltip envuelve contenido en línea con la misma facilidad con la que envuelve un botón.

text(
  'La compilación escribe en ',
  tooltip({ content: 'Configurable con outDir' }, code('dist/')),
  ' y en ningún otro sitio.',
)

Cuándo no usar uno

Los tooltips no aparecen al tocar la pantalla, y desaparecen en cuanto el puntero se va. Cualquier cosa que el lector deba tener sí o sí —un mensaje de error, la explicación de un campo obligatorio— va en el texto de help del propio campo, no en un tooltip.

Props