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 TooltipWithHeadingDemo() {
return (
<div style={{ display: "flex", justifyContent: "center", padding: "4rem" }}>
<Tooltip
placement="right"
contentHeading="Session Security"
content="For your security, inactive sessions expire after 15 minutes of inactivity."
defaultIcon="info"
label="Session expiration info"
/>
</div>
);
}
More by a11ypros
View all
Accessible Radio Group
1
Accessible Accordion
1
A11y Label
More in Buttons
View all
Button Save
46
Button
20
Eclipse Button
5
Button
6
Button
14
Button Group
37
Button
32
Split Button
32
