---
title: "Magnetic Tooltip — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Isaac Yi · Interactive. Magnetic Tooltip delivers a physics-based cursor-following tooltip with a requestAnimationFrame lerp loop — smooth, 60fps, and zero…"
canonical: "https://framer.elliotli.dev/component/magnetic-tooltip"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Magnetic Tooltip

# Magnetic Tooltip

Lerp-based magnetic cursor tooltip

[View on Framer](https://framer.com/marketplace/components/magnetic-tooltip/?via=elliot-li)

![Magnetic Tooltip preview image 1](https://framer.elliotli.dev/og/component/magnetic-tooltip/0df46f169edf3068/1600x920.jpg)

## Summary

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

## Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #10407

## Details

- **Author**: Isaac Yi
- **Price**: $5.00
- **Published**: 2026-06-28
- **Updated**: 2026-06-30
- **Added**: 2026-06-28
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step