Toggletip design pattern (div/span)

This toggletip is created using the <span> and <div> elements, with scripting to provide the expected behaviour. Additional semantic information is provided with ARIA.

It is better to use the <button> and <aside> elements to create toggletips because the browser provides more keyboard support and semantic information.

Example

Tequila

Notes

This toggletip is based on the design pattern first proposed by Steve Faulkner.

The button role is used to expose the <span> element as a button in the accessibility tree.

The tabindex attribute is used to add the <span> element to the tab order, based on its location within the DOM.

The complementary role is used to expose the <div> element as complementary information in the accessibility tree.

The aria-expanded attribute indicates the current state of the toggletip.

The aria-describedby attribute associates the tooltip content with the <button>.

The hidden attribute hides the <aside>> element until the toggletip is activated.

The tooltip role exposes the <span> element as a tooltip in the accessibility tree.

The aria-live attribute turns the <span> element into a live region that is announced automatically by screen readers.

The click and keydown event listeners capture the expected mouse and keyboard events for opening and closing the toggletip.