---
title: "Cursor Tooltip — Framer component · Best of Framer"
description: "$1.00 · Framer component · by Artem Kostenko · Cursors. FEATURES Cursor-following tooltip with smooth tracking Smart auto-positioning based on cursor location Customizable hover area…"
canonical: "https://framer.elliotli.dev/component/cursor-tooltip"
---

[Home](/)/[Components](/components)/[Cursors](/components/category/cursors)/Cursor Tooltip

# Cursor Tooltip

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

![Cursor Tooltip preview image 1](https://framer.elliotli.dev/og/component/cursor-tooltip/30a45596f2082862/1600x1200.jpg)

## Summary

FEATURES Cursor-following tooltip with smooth tracking Smart auto-positioning based on cursor location Customizable hover area with link support Optional arrow pointer Backdrop…

## Description

FEATURES

-   Cursor-following tooltip with smooth tracking
    
-   Smart auto-positioning based on cursor location
    
-   Customizable hover area with link support
    
-   Optional arrow pointer
    
-   Backdrop blur effects
    
-   Fully customizable colors, fonts, and spacing
    
-   Configurable show delay
    

SETTINGS

Positioning & Behavior:

-   Placement: Choose where the tooltip appears relative to cursor (Auto, Top, Bottom, Left, Right). Auto mode intelligently positions the tooltip on the opposite side of the nearest edge
    
-   Show Arrow: Toggle the directional arrow pointer on/off
    
-   Offset: Distance between cursor and tooltip (0-50px)
    
-   Delay: Time before tooltip appears after hover starts (0-2000ms)
    

Tooltip Appearance:

-   Tooltip Text: The message displayed in the tooltip
    
-   Tooltip Background: Background color of the tooltip
    
-   Tooltip Text: Text color inside the tooltip
    
-   Tooltip Font: Typography settings (size, weight, spacing, line height)
    
-   Tooltip Radius: Border radius of the tooltip (0-50px)
    
-   Tooltip Blur: Backdrop blur effect strength (0-20px)
    

Hover Area Settings:

-   Area Text: Text displayed in the hover area
    
-   Area Underline: Toggle underline decoration for area text
    
-   Area Link: URL to navigate to when area is clicked
    
-   Link Target: How the link opens (Same Tab, New Tab, Parent Frame, Top Frame)
    
-   Area Background: Background color of the hover area
    
-   Area Text: Text color in the hover area
    
-   Area Font: Typography settings for the hover area
    
-   Area Padding: Internal spacing of the hover area
    
-   Area Radius: Border radius of the hover area (0-50px)
    

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

-   All · #6536

## Details

- **Author**: Artem Kostenko
- **Price**: $1.00
- **Published**: 2025-10-30
- **Updated**: 2025-10-30
- **Added**: 2025-10-21
- **Categories**: Cursors

## More like this

-   [Ribbon Hero](/component/ribbon-hero) — Divyesh WebCraft · Free — 3D ribbon with smooth motion
-   [Spider Hunt](/component/spider-hunt) — Karim Saif · $6 — ٍpider that tracks your cursor
-   [Pixel Fluid](/component/pixel-fluid) — Jamik · $12 — Fluid cursor trail in pixels/ASCII
-   [CursorImageTrail](/component/cursorimagetrail) — princeee · $20 — Image Trail is a dynamic Framer component that creates an immersive hover experience by displaying a sequence of images that trail behind…