Skip to content

Instantly share code, notes, and snippets.

@raunofreiberg
Last active July 7, 2020 19:23
Show Gist options
  • Save raunofreiberg/4cca31c4854c0cbcbe8c133608ed73fc to your computer and use it in GitHub Desktop.
Save raunofreiberg/4cca31c4854c0cbcbe8c133608ed73fc to your computer and use it in GitHub Desktop.

Tooltip

Tooltip is a non-interactive overlay that briefly explains the function of the trigger element.

Functionality

  • Displayed when the trigger element is hovered by the mouse or when it receives keyboard focus.

  • Focus remains on the trigger element while the tooltip is displayed.

  • Dismissed with the Escape key or by a blur/mouseleave event.

Best practices

  • Do not use a tooltip for information vital to task completion. The action of the element it is attached to should make sense on its own.

  • Make sure to provide a short and succinct label for the tooltip.

  • Avoid interactive content such as buttons and links inside the tooltip. As an alternative, consider Popover.

  • Displaying the tooltip too quickly on mouseover can result in accidental activations and creates a jarring user experience. It is advisable to add a short delay (~100ms) before displaying it.

  • Once a tooltip is visible, interaction with any other tooltip should display immediately without the delay.

  • The tooltip can have preferred positioning options, but should adjust itself dynamically based on collisions and available space.

Implementation

  • To avoid parent containers possibly clipping the tooltip, it is advisable to render the tooltip in a React Portal with fixed positioning.

  • By default, disabled elements like <button> do not trigger mouse events. This is an unfortunate misinterpretation of the spec by the browsers. As a workaround, we recommend using Pointer Events (which follow the spec more closely) for disabled trigger elements.

Examples

TODO: Render a few well implemented and accessible tooltip components here.

Accessibility

The accessibility requirements for this component are defined by the WAI-ARIA Practices 1.1 for Tooltip:

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment