< Back to Demos | Learn more at PaulJAdam.com >

ARIA Tooltip


I followed the ARIA pattern in this demo, but then I added aria-expanded on the button to tell the user that something is expanding and collapsing, however, the ARIA pattern does not mention anything about using aria-expanded.

Following ARIA pattern plus added aria-expanded

Following ARIA pattern except using aria-labelledby over -describedby plus added aria-expanded

Tooltip with semantic HTML content

Tooltip as a link

SVG tooltip

Tooltip as a div tabindex=0 role=button

Tooltip as a link with no url prevent default