Animated Tooltip

A smooth, motion-powered tooltip that brings your UI to life with subtle, elegant animations.

Smooth spring animations4-way positioningCustomizable delays
Basic
Features

Smart Positioning

Automatically adjusts to top, bottom, left, or right placements.

Controlled State

Full control over open/close state via props.

Custom Delays

Configure open and close delays for perfect timing.

Optional Arrow

Toggle the directional arrow for different styles.

Installation
Works with npm, pnpm, yarn, and bun

$npx libravelui@latest add animated-tooltip

Anatomy
import { AnimatedTooltip } from "@/components/ui/motion/animated-tooltip";<AnimatedTooltip content="Tooltip content"><Button>Hover me</Button></AnimatedTooltip>
Testing Playground
Positions
Custom Delay
With Arrow
Props

Loading types…

Edit on GitHub

Animated Switch

A precise switch, engineered with motion physics. Beauty in every pixel. Seamless by default. Use the live controls below to explore controlled/uncontrolled modes, stress tests, and why extra className that alters sizing will break the switch's internal geometry.

Comparator

Interactively compare two elements with a draggable slider to reveal differences.