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
Drop ContextualText onto your Framer canvas
Paste your content into the Content field
Add word–definition pairs in the Definitions array
Ensure words match exactly as written in your content (case-insensitive)
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.