@reform-digital/tooltip-x

v1.1.0

Published

a month ago

A lightweight, accessible Webflow-friendly tooltip library — hybrid hover, click, and focus support with zero dependencies.

0High
0Medium
0Low

reform-digital

TooltipX™

Accessible tooltip library 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:

<div rd-tooltipx="wrapper">
  <div rd-tooltipx="icon">ℹ️</div>
  <div rd-tooltipx="for">Your Label Text</div>
  <div rd-tooltipx="tooltip">Your tooltip content goes here</div>
</div>

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 components
rd-tooltipx="icon" — Clickable/hoverable trigger element (typically an info icon)
rd-tooltipx="for" — Label text that the tooltip is associated with
rd-tooltipx="tooltip" — The tooltip content that appears

Complete Example

<div rd-tooltipx="wrapper">
  <div rd-tooltipx="icon">ℹ️</div>
  <div rd-tooltipx="for">Shipping Information</div>
  <div rd-tooltipx="tooltip">
    Free shipping on orders over $50.
  </div>
</div>

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:

window.TooltipX.init();

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