TooltipX™
Accessible tooltips for Webflow.
Overview
TooltipX™ provides a simple framework for adding interactive tooltips to web elements. Developed by Reform Digital® specifically for Webflow websites.
Features
Hybrid interaction support — Works with hover, click, and keyboard focus
Accessible by default — Automatic ARIA labels and keyboard navigation
Zero dependencies — Lightweight and fast-loading
Webflow-friendly — Uses HTML data attributes that work seamlessly with Webflow
Smart behavior — Closes other tooltips when opening a new one, auto-closes on scroll
Fully customizable — Complete control over styling using Webflow's native design tools
Quick Start
1. Add the Script
Add to your Webflow project's global settings, inside the <head> tag:
<script
src="https://cdn.jsdelivr.net/npm/@reform-digital/[email protected]/prod/index.js"
></script>2. Add HTML Structure
Wherever you want a tooltip, add this structure:
That's it! TooltipX™ automatically initializes and makes your tooltip interactive.
Required Attributes
TooltipX™ uses HTML data attributes to identify elements. You need four attributes:
rd-tooltipx="wrapper"— Main container wrapping all tooltip componentsrd-tooltipx="icon"— Clickable/hoverable trigger element (typically an info icon)rd-tooltipx="for"— Label text that the tooltip is associated withrd-tooltipx="tooltip"— The tooltip content that appears
Complete Example
Behavior
Hover — Shows on mouse enter, hides on mouse leave
Click — Toggle open/closed with a click
Keyboard — Shows on focus (Tab key), closes on Escape
Smart — Only one tooltip open at a time, closes on scroll or click outside
TooltipX™ automatically adds ARIA labels and keyboard accessibility. Style everything using Webflow's native design tools.
Advanced
Manual Re-initialization
If you're dynamically adding tooltips after page load:
Support
Need help? Join our Slack community.
Product Tracking
TooltipX™ includes an extremely lightweight telemetry module that helps us understand product adoption patterns. This information allows us to focus our support efforts and prioritize product enhancements where they matter most.
What We Track:
Product Identifier: The name of the product (e.g., "TOOLTIP_X")
Domain: The public hostname where the product is installed (e.g., "example.com")
Privacy & Performance:
No cookies, fingerprinting, or personally identifiable information
Only runs on live, public domains (never on localhost or development environments)
Single lightweight request sent once per page load
Data is aggregated for internal analytics only
Not used for advertising, marketing, or tracking
This anonymous usage data helps us ensure TooltipX™ evolves to meet real-world needs.
Last updated