Magnetic Tooltip

Magnetic Tooltip delivers a physics-based cursor-following tooltip with a requestAnimationFrame lerp loop — smooth, 60fps, and zero React re-renders during animation.

The tooltip renders via ReactDOM.createPortal into document.body, so it escapes every Framer parent frame regardless of transform, filter, or perspective applied to ancestors. No z-index debugging required.

What's included:

• Adjustable magnetic strength (0.02–0.5) — sticky to snappy

• X/Y cursor offset control (-200 to 200px)

• Frosted glass backdrop blur (0–60px)

• Configurable tooltip: text, background color, text color, border radius

• Configurable trigger zone: label text, font size, border toggle, border color, border radius

• No framer-motion — pure requestAnimationFrame + React

• Zero re-renders during the animation loop

• SSR-safe portal rendering

Perfect for hero sections, product showcases, and interactive demos that need a premium hover effect without importing animation libraries.