Tooltip Animated
Advanced tooltip with multiple animation variants and gradient styling.
Configuring your account...
Please wait while we prepare everything for you
Usage
import TooltipAnimated from '@/components/bynanaui/tooltip-animated';
import { Button } from '@/components/ui/button';
<TooltipAnimated
content="Animated tooltip with bounce effect"
animation="bounce"
position="top"
delay={200}
>
<Button>Hover me</Button>
</TooltipAnimated>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | string | - | Tooltip content text |
| children | ReactNode | - | Element to trigger tooltip |
| position | 'top' | 'bottom' | 'left' | 'right' | 'top' | Tooltip position |
| delay | number | 200 | Delay before showing (ms) |
| className | string | - | Additional CSS classes |
| animation | 'fade' | 'slide' | 'bounce' | 'scale' | 'slide' | Animation type |
Features
- Multiple animation variants (fade, slide, bounce, scale)
- Spring-based animations
- Customizable positioning
- Smooth transitions
- Modern styling with backdrop blur
- Responsive design