Tooltip con resorte

Tooltip (role tooltip) que sigue al cursor con un resorte y cuelga de él como una etiqueta: se inclina con la velocidad y se estira un poco al moverse. También aparece con el foco del teclado.

Plan: Gratis · MIT
Dependencias: Solo React
Props: 7 (5 ajustables)

1. Instala el paquete

npm i furin

2. Impórtalo

import { SpringTooltip } from "furin";

También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.

Prop	Tipo	Por defecto	Descripción
content	ReactNode	"Se inclina con la velocidad del cursor"	Contenido del tooltip.
children	ReactNode	""	Elemento sobre el que aparece. Si no pones nada, se dibuja uno de ejemplo.
tilt	number	1	Qué tanto se inclina con la velocidad del cursor (0 = no se inclina).
stiffness	number	360	Rigidez del resorte con el que sigue al cursor.
offset	number	16	Distancia al cursor, en px.
delay	number	0	Milisegundos de espera antes de mostrarse.
autoplay	boolean	false	Se pasea solo sobre el elemento cuando nadie lo toca.

Sigue explorando

Día y noche
Pro
Interruptor de tema (role switch) donde el sol se transforma en luna, las nubes se hunden y salen las estrellas, todo con resortes.
Navegación
Paleta de comandos
Pro
Diálogo ⌘K accesible con búsqueda difusa, resaltado de coincidencias, grupos y una selección de resorte que se desliza entre filas. Flechas, Enter y Escape.
Navegación
Acordeón
Gratis
Acordeón accesible (aria-expanded, regiones, flechas, Inicio y Fin) cuyas regiones se abren con un resorte real: la altura rebota al llegar y el contenido entra de lo borroso a lo nítido.
Navegación

Instalación

Props

Sigue explorando

Día y noche

Paleta de comandos

Acordeón