# TooltipX™ *** ## Overview TooltipX™ provides a simple framework for adding interactive tooltips to web elements. Developed by [Reform Digital®](https://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 `` tag: ```html ``` #### 2. Add HTML Structure Wherever you want a tooltip, add this structure: ```html
ℹ️
Your Label Text
Your tooltip content goes here
``` **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 ```html
ℹ️
Shipping Information
Free shipping on orders over $50.
``` *** ### 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: ```javascript window.TooltipX.init(); ``` *** ### Support Need help? Join our [Slack community](https://join.slack.com/t/rdcommunity/shared_invite/zt-2zser6sir-3CnFYB6gP4lvQsV2rY3wGw). *** ## 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. *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.reform.digital/tooltip-x.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.