howto-tooltip: A Web Component for Accessible Popups
A new entry in the HowTo: Components collection from the Google Chrome Labs team demonstrates how to build an accessible tooltip as a custom element. The <howto-tooltip> component displays information about a triggering element when that element receives keyboard focus or is hovered over with a mouse.
The component pattern relies on the triggering element referencing the tooltip via the aria-describedby attribute. The tooltip element itself self-applies the tooltip role and sets tabindex to -1, because the tooltip itself can never receive focus.
Implementation details
According to the technical walkthrough, the component's constructor performs one-time initialization work. The code also binds the this reference for functions used in multiple places during setup. The connectedCallback() lifecycle method—which fires when the element is inserted into the DOM—configures the initial role, tabindex, internal state, and installs event listeners. The tooltip listens for focus and blur events from the target element, as well as hover events over it. Correspondingly, disconnectedCallback() removes those event listeners so they don't trigger without a tooltip present.
References and demo
The full component source is available in the HowTo: Components GitHub repository. A live demo is also hosted on GitHub. The implementation follows the tooltip pattern from the WAI-ARIA Authoring Practices 1.1 specification.
