Tooltip

Tooltip

Nombrar un botón de ícono o aclarar un número. Aparece con hover y con foco.

Etiqueta corta para nombrar un botón de ícono o aclarar un número. Aparece con hover y con foco.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/tooltip.json

import

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@moodinary/ui/components/tooltip";

Ejemplos

Los botones de ícono llevan tooltip y aria-label. En números, explicá de dónde sale el valor.

3,4 promedio

Código

icon-and-number.tsx

import { Button } from "@moodinary/ui/components/button";
import { BellIcon, QrCodeIcon } from "@moodinary/ui/components/icons";
import {
	Tooltip,
	TooltipContent,
	TooltipProvider,
	TooltipTrigger,
} from "@moodinary/ui/components/tooltip";

export default function TooltipIconAndNumber() {
	return (
		<TooltipProvider>
			<Tooltip>
				<TooltipTrigger
					render={
						<Button aria-label="Compartir QR" size="icon" variant="secondary" />
					}
				>
					<QrCodeIcon />
				</TooltipTrigger>
				<TooltipContent>Compartir QR del pulso</TooltipContent>
			</Tooltip>
			<Tooltip>
				<TooltipTrigger
					render={
						<Button
							aria-label="Notificaciones"
							size="icon"
							variant="secondary"
						/>
					}
				>
					<BellIcon />
				</TooltipTrigger>
				<TooltipContent>Notificaciones · 3 nuevas</TooltipContent>
			</Tooltip>
			<Tooltip>
				<TooltipTrigger
					render={
						<span
							className="border-ink-3 border-b border-dashed text-sm tabular-nums"
							// biome-ignore lint/a11y/noNoninteractiveTabindex: el número necesita foco de teclado para mostrar el tooltip
							tabIndex={0}
						/>
					}
				>
					3,4 promedio
				</TooltipTrigger>
				<TooltipContent>
					Dato de ejemplo: promedio de 312 respuestas, de lunes a viernes
				</TooltipContent>
			</Tooltip>
		</TooltipProvider>
	);
}

Props

TooltipProvider

Prop	Tipo	Default	Descripción
delay	number	0	Espera antes de abrir, en ms. Envolvé la app una vez.

TooltipContent

Prop	Tipo	Default	Descripción
side	"top" \| "right" \| "bottom" \| "left"	"top"	Lado del disparador.
sideOffset	number	4	Distancia en px.
align	"start" \| "center" \| "end"	"center"	Alineación.

Cuándo sí y cuándo no

Hacé

Escribí frases cortas: Compartir QR del pulso.
Sumá el contexto que el ícono no da, como 3 nuevas.
Usalo para aclarar cómo se calcula un promedio.

Evitá

No pongas links ni botones adentro.
No repitas el texto que ya se ve.
No escondas información necesaria solo en un tooltip.

Abre con foco de teclado y se cierra con Esc.
El disparador tiene que ser enfocable; en un número usá tabIndex={0}.
No reemplaza el aria-label de un botón de ícono.