Cursor Tooltip

Overlays

A floating panel that springs along with the cursor.

Hover me

Installation

Add it with the shadcn CLI:

$pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/cursor-tooltip.json

Or install manually

1. Install dependencies
```
pnpm add motion clsx tailwind-merge
```
2. Copy the component source into components/library/cursor-tooltip.tsx

Props

Prop	Type	Default	Description
content	ReactNode	-	Floating content shown next to the cursor.
children	ReactNode	-	The trigger the pointer hovers.

Accessibility

Portalled to <body>, so an ancestor's overflow cannot clip it.
Flips and clamps on both axes to stay inside the viewport.
pointer-events-none, so it never steals the hover from the trigger.
Pointer-only - pair it with real markup for keyboard and screen readers.

Dependencies

motionclsxtailwind-merge