Contextual Text — Text with hoverable inline definitions

ContextualTextTooltip transforms static text into an interactive reading experience. It scans your content for words that match your custom dictionary, highlights only the first occurrence of each, and displays a polished frosted-glass tooltip on hover. The tooltip smoothly follows the cursor, auto-repositions to stay within the viewport, and supports scrolling for longer definitions.

Use Cases

• Product landing pages that explain technical terms inline without cluttering the layout

• Onboarding flows where key concepts need quick clarification

• Documentation or help pages

• SaaS dashboards that guide users through complex terminology

Prop Controls

• Content & Definitions — Add your body text and a list of word–definition pairs. Only the first occurrence of each word gets highlighted

• Typography & Text Color — Full font control and body text color

• Highlight — Set the highlight color, bold toggle, and underline style (solid, dashed, dotted)

• Tooltip — Customize background opacity, blur, radius, shadow, and max width for the glassmorphic popup

Quick Start Guide

1. Drop ContextualText onto your Framer canvas

2. Paste your content into the Content field

3. Add word–definition pairs in the Definitions array

4. Ensure words match exactly as written in your content (case-insensitive)

5. Preview in Framer's present mode to see hover interactions live

Note: Only the first occurrence of each dictionary word will be highlighted and interactive.