Docs / Components / Cursor Tooltip Portal
Cursor Tooltip Portal
A high-performance cursor-anchored tooltip portal with inertial spring tracking, context-aware content switching, and elegant multiline blur-fade reveal transitions.
Dependencies
Install the following dependencies to use this component:
1npm install framer-motion clsx tailwind-merge
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add cursor-tooltip-portal
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | undefined | Dynamic contextual text to display inside the cursor-following floating portal. |
| defaultText | string | 'Explore' | Fallback text displayed when no specific hover target text is provided. |
| children | ReactNode | - | Interactive content or card grid that the cursor tracks across. |
| maxWidth | number | string | 240 | Maximum width of the floating portal card before multiline truncation. |
| maxHeight | number | string | 120 | Maximum height of the floating portal card. |
| maxLines | number | 3 | Maximum number of lines allowed before truncating with ellipsis. |
| stiffness | number | 220 | Spring stiffness for cursor tracking speed. |
| damping | number | 24 | Spring damping factor for smooth trailing delay. |
| mass | number | 0.6 | Mass of spring physics creating inertial delay. |
| offsetX | number | 16 | Offset distance from cursor on X axis. |
| offsetY | number | 16 | Offset distance from cursor on Y axis. |
| className | string | '' | Additional CSS classes for the container wrapper. |
| cardClassName | string | '' | Additional CSS classes for the floating portal card. |