Liquid Tooltip
A toolip component with a liquid-like spring physics effect that reacts to mouse movement.
Installation
pnpm dlx rareui add liquid-tooltip
Usage
Usage
1
Import the component
import { LiquidTooltip } from "@/components/rareui/LiquidTooltip";
2
Use in your application
export default function MyComponent() {
return (
<LiquidTooltip text="Hello world!">
<button>Hover me</button>
</LiquidTooltip>
);
}
Features
Visually satisfying liquid-like spring physics effect.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | The text to display inside the tooltip. |
children | React.ReactNode | - | The element to hover over. |
placement | 'top' | 'bottom' | 'left' | 'right' | 'top' | The position of the tooltip relative to the element. |
className | string | - | Helper class for the wrapper. |
popupClassName | string | - | Helper class for the tooltip popup itself. |