About
A WCAG-compliant tooltip that shows contextual help text on hover or keyboard focus, with ARIA aria-describedby wiring, Escape-to-dismiss, hoverable persistence, and automatic edge-clamping. Ported from A11YPros' accessible a11y-tooltip web component (MIT licensed).
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Accessible Tooltip to your project and fits it to your theme.
Code
How Accessible Tooltip is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Tooltip from "@/components/ui/a11y-tooltip";
export default function TooltipTextTriggerDemo() {
return (
<div
style={{
display: "flex",
justifyContent: "center",
padding: "4rem",
fontSize: "1rem",
color: "#171717",
}}
>
Total Due:{" "}
<Tooltip content="Includes applicable state sales tax and courier delivery surcharge.">
<span>$142.50*</span>
</Tooltip>
</div>
);
}
More by a11ypros
View all
Accessible Accordion
1
Accessible Radio Group
A11y Label