Tooltips with WAI-ARIA

Span elements hold the tooltips. Role="tooltip" is used.

Basic tooltip (aria-hidden except when visible)

Silent tooltips (Always aria-hidden. Good for situations like when an icon has alt-text that matches the tooltip.)

Always-present tooltips (Never aria-hidden.)


Keyboard Only - works everywhere tested (mouse too where applicable!)

Screen Readers that didn't display effects of role="tooltip"

Screen Readers that did display effects of role="tooltip"