Tooltip Magnetic
Magnetic tooltip that follows mouse movement with spring physics and visual effects.
Configuring your account...
Please wait while we prepare everything for you
Usage
import TooltipMagnetic from './TooltipMagnetic';
import { Button } from '@/components/ui/button';
<TooltipMagnetic
content="This tooltip follows your mouse movement!"
magneticStrength={0.3}
springConfig={{ stiffness: 300, damping: 30 }}
delay={200}
>
<Button>Hover and move mouse</Button>
</TooltipMagnetic>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | string | - | Tooltip content text |
| children | ReactNode | - | Element to trigger tooltip |
| delay | number | 200 | Delay before showing (ms) |
| className | string | - | Additional CSS classes |
| magneticStrength | number | 0.3 | Magnetic effect strength (0-1) |
| springConfig | object | {stiffness: 300, damping: 30} | Spring animation config |
Features
- Mouse-following magnetic effect
- Spring physics animations
- Animated gradient backgrounds
- Shimmer effects
- Floating particles
- Magnetic field visualization
- Customizable strength
- Smooth spring transitions