Tooltip

Components

A tooltip is a floating, non-actionable label used to explain a user interface element or feature on hovers, focus, taps or click.

Common usages for tooltips include:

help users understand the meaning or purpose of icons buttons
show the full version of truncated text
display alternative text for an image
used with disabled buttons to explain why the action is unavailable

Import

import { Tooltip } from '@outfitio/outkit';

Usage

If the children of Tooltip is a string, we wrap with in a span with tabIndex set to 0, to ensure it meets the accessibility requirements.

A tooltip can be wrapped around any page element.

If the children of the tooltip is a focusable element, the tooltip will show when you focus or hover on the element, and will hide when you blur or move cursor out of the element.

Placement

Using the placement prop you can adjust where your tooltip will be displayed.

Accessibility

The Tooltip component follows the WAI-ARIA Tooltip Pattern
Tooltips should be displayed on both hover and keyboard focus

Best Practice

Tooltips should:

Provide useful, additional information or clarification
Succinctly describe or expand on the element they point to
Only appear when the user has paused on the target element
Never be used to communicate critical information, such as errors or interaction feedback

Props

Name	Type	Default	Description
`isOpen`	`boolean`		If `true`, the tooltip is shown.
`defaultIsOpen`	`boolean`		If `true`, the tooltip is initially shown.
`label`	`string`		The label of the tooltip.
`aria-label`	`string`		An alternate label for screen readers.
`placement`	`PopperJS.Placement`	`bottom`	Position the tooltip relative to the trigger element as well as surrounding elements.
`children`	`React.ReactNode`		The `ReactNode` to be used as the trigger of the tooltip.
`hasArrow`	`boolean`		If `true` display an arrow tip on the tooltip.
`showDelay`	`number`		The delay in `ms` for the tooltip to show
`hideDelay`	`number`		The delay in `ms` for the tooltip to hide
`closeOnClick`	`boolean`		If `true` hide the tooltip, when the trigger is clicked.
`shouldWrapChildren`	`boolean`		If `true`, the tooltip will wrap the children in a `span` with `tabIndex=0`
`onOpen`	`function`		Function called when the tooltip shows.
`onClose`	`function`		Function called when the tooltip hides.