Turn title attributes into tooltips to make them accessible on hover and focus.

See the documentation on GitHub

Example

Try hovering or focusing the buttons below for a quick preview:

Accessibility

Explicit aims to make titles fully accessible by adhering to the WCAG guidelines on Content on Hover or Focus .
Thus, explicit tooltips are :

  • Persistent, as they stay visible as long as the user focuses the trigger element or the tooltip
  • Hoverable, so the user can select the tooltip's text
  • Dismissable, as they can be closed by pressing Escape

How it works

Explicit leverages the browser's layout engine by using CSS to position tooltips.
First, a bit of JavaScript finds the area where there is the most space available.
Then, a flex container is placed in that area, so the browser can position the tooltip inside of it and properly handle edge cases (i.e. when there is not enough space to fit the text on one line).

Tooltips are painted on a dedicated compositing layer to minimize unnecessary reflows and repaints.

You can see below how the container is positionned inside the available space: