---
title: "Contextual Text — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Evixel Studio · Text. Text with hoverable inline definitions"
canonical: "https://framer.elliotli.dev/component/contextual-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Contextual Text

# Contextual Text

Interactive inline text tooltips

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

![Contextual Text preview image 1](https://framer.elliotli.dev/og/component/contextual-text/236e2d0e79f1123b/1600x1200.jpg)

## Summary

Text with hoverable inline definitions

## Description

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.

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

-   All · #10897

## Details

- **Author**: Evixel Studio
- **Price**: $7.00
- **Published**: 2026-03-04
- **Updated**: 2026-09-19
- **Added**: 2026-02-28
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos