Tooltip

Overlays

Animated tooltip that appears on hover with customizable position and styling.

Dependencies:

framer-motion

Full

Hover over each button to see tooltips in different positions

Icon buttons with tooltips

Preview

Interactive

Installation

1. Install dependencies

npm install framer-motion

2. Copy the component

Copy the source code from the Code tab above and save it to your components folder.

3. Import and use

import { Tooltip } from '@/components/Tooltip'

Animated modal dialog with backdrop, keyboard support, and customizable content.

Click-triggered floating content with arrow, multiple positions, and hover mode.