Tooltips

Tooltip Attributes

preferredPos showDelay hideDelay

This page demonstrates a web component to show accessible, interactive tooltips: <gw-tooltip>.

WCAG 1.4.13 is difficult to meet, especially if the tooltip content is interactive. This component aims to meet and exceed its requirements:

Dismissible: Tooltips which cover other content must be able to be dismissed without moving the mouse or focus. <gw-tooltip> hides its tooltip when Esc is pressed.
Hoverable: Users must be able to move their mouse into the tooltip's content without the tooltip vanishing. <gw-tooltip> meets this, and provides an optional attribute to delay the tooltip hiding once focus or hover leaves, making it easier for users to accomplish this task.
Persistent: Tooltips must persist until dismissed manually or focus/hover moves. <gw-tooltip> meets this requirement.

In addition to meeting these baseline criteria, <gw-tooltip> has the following features:

Elements with a tooltip are indicated visually and to assistive tech without hover or focus.
An element with a shown tooltip is visually distinct.
The tooltip may be instructed to display in one of four orientations: above, below, left, right.
The tooltip will automatically change orientation to fit onto the screen.
When tooltips show and hide is indicated to assistive tech.
The tooltip is linked to its trigger element via aria-details.
The bounds of the tooltip are comminicated accessibly via a region.
All text communicated to assistive tech is translatable (by preferring aria-labelledby over aria-label).
Tooltip triggers have visual focus indication where they otherwise would not (e.g. if they were a <span>).

Attributes:

preferredPos: {"top" | "bottom" | "left" | "right"} (default "bottom"). The orientation of the tooltip contingent on available space.
showDelay: Miliseconds (default 0) after hover and focus the tooltip waits to appear
hideDelay: Miliseconds (default 500) after losing hover and focus the tooltip waits to vanish

Required child elements:

An element with class="tool": This is the visible element that will trigger the tooltip.
An element with class="tip": This is the hidden element which appears on hover or focus. It will have its role set to "region".

CSS Variables:

--border-color: Default: "black". The color of the border on elements which have a tooltip.
--focus-color: Default: "red". The outline color given to elements with tooltips when they receive focus.
--background-color: Default: "white". The background color of the tooltip elements.
--text-color: Default: "black". The color of text in the tooltip element.
--mark-color: Default: "#FCC5F1". The background color given to elements with a tooltip when their tooltip is showing.