Tooltip

Burbuja oscura que explica un control al pasar el ratón o al enfocarlo.

Cuándo usarlo

Props. title, text (segunda línea en tooltip-supporting-text), children (el elemento que lo dispara), open (forzarlo visible). Fondo bg-primary-solid, radius-lg, shadow-lg, flecha centrada abajo.

No. Nada imprescindible dentro de un tooltip: en móvil no hay hover.

Comportamiento. Aparece encima del control, centrado y a 10px, al pasar el ratón (tras 300 ms) o al llegar con el teclado; Escape lo cierra sin mover el foco. El control queda descrito por el texto del tooltip (aria-describedby). Si no cabe arriba, se pone debajo.

El disparador. Tiene que poder recibir el foco y pasar ref y props al DOM, como Button. Un botón solo icono necesita además su label: el tooltip lo describe, no le da nombre.

Detalles. open lo deja fijo en línea sobre el control (así se ve en esta página).

Ejemplos

Props

Prop	Tipo	Por defecto	Descripción
`title`obligatoria	`ReactNode`	—
`text`	`ReactNode`	—	Segunda línea, en `tooltip-supporting-text`.
`open`	`boolean`	—	Fuerza el tooltip visible (vistas previas y capturas).
`children`obligatoria	`ReactNode`	—	El elemento que lo dispara: tiene que poder recibir el foco y pasar `ref` y props al DOM, como `Button`.

Código

import { Tooltip } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<Tooltip title="Exportar a CSV" text="Incluye los movimientos filtrados.">
				<Button hierarchy="secondary" iconOnly="download-01" label="Exportar" />
			</Tooltip>
		</>
	);
}

---
import { Tooltip } from "@jotis-me/react";
---

<Tooltip client:load title="Exportar a CSV" text="Incluye los movimientos filtrados.">
	<Button hierarchy="secondary" iconOnly="download-01" label="Exportar" />
</Tooltip>

El disparador tiene que ser un componente React (como Button), no HTML de la página Astro: pon Tooltip y su botón juntos en un .tsx y úsalo con client:load.