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

ARIA Tooltip

http://w3c.github.io/aria-practices/#tooltip
http://w3c.github.io/aria/aria/aria.html#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

Main Tooltip Heading

This is the tooltip HTML content.

This is a link to google.

This is some MathML

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

This is a data table

Concerts
Date	Event	Venue
12 Feb	Waltz with Strauss	Main Hall
24 Mar	The Obelisks	West Wing
14 Apr	The What	Main Hall

Tooltip as a link

PaulJAdam.com

SVG tooltip

Tooltip as a div tabindex=0 role=button

I am a div with button role.

Tooltip as a link with no url prevent default

I am a link with href=javascript:;