Tooltip Accessibility Demo


I made this as an informal demo a while ago, and since then further user testing has shown that Escape is not a good key to dismiss tooltips, for a variety of reasons. I'd recommend using the Control key to dismiss instead.

A few examples of simple tooltips serving as the name or description of buttons and form fields. They work with mouse and keyboard, and are dismissable with Escape or by clicking the "x". This allows the tooltips to meet WCAG 2.1 Content on Hover or Focus.

A text input with a tooltip helper

Any name you want

An icon button with name in tooltip

This tooltip is a child of the button element, but could also live outside the button in conjunction with aria-labelledby.

Make it better

This pen does not do viewport collision detection, which would be a good idea to add for production-ready tooltips.

It also does not handle preventing multiple overlapping tooltips (e.g. with combined focus & hover) which would be a good idea, particularly when open tooltips may overlap, e.g. within a menubar or toolbar.