Sajari UI

A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.

The Tooltip component follows the WAI-ARIA Tooltip Pattern.

Import

import { Tooltip } from '@sajari-ui/core';

import { Tooltip } from '@sajari-ui/core';

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.

Editable Example

Hover me

<Tooltip label="Hey, I'm here!">Hover me</Tooltip>

<Tooltip label="Hey, I'm here!">Hover me</Tooltip>

With an icon

Editable Example

<Tooltip label="Search places" placement="top-end">
  <Icon name="search" />
</Tooltip>

<Tooltip label="Search places" placement="top-end">
  <Icon name="search" />
</Tooltip>

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.

Editable Example

<Tooltip label="Search places" placement="top-start">
  <Button>Button</Button>
</Tooltip>

<Tooltip label="Search places" placement="top-start">
  <Button>Button</Button>
</Tooltip>

If you want users to be able to hover the tooltip, for example to support having links in the tooltip, you can add the hoverable prop and optional set a hoverDelay.

Editable Example

<Tooltip
  label={
    <>
      You can include <Link href="#">links</Link>
    </>
  }
  placement="top-start"
  hoverable
>
  <Button>Button</Button>
</Tooltip>

<Tooltip
  label={
    <>
      You can include <Link href="#">links</Link>
    </>
  }
  placement="top-start"
  hoverable
>
  <Button>Button</Button>
</Tooltip>

Placement

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

Editable Example

<Flex flexDirection="flex-col" alignItems="items-center" space="space-y-6">
  <Tooltip label="Right end" placement="right-end">
    <Button variant="outline">Right-End</Button>
  </Tooltip>

  <Tooltip label="Left" placement="left">
    <Button variant="outline">Left</Button>
  </Tooltip>

  <Tooltip label="Auto start" placement="auto-start">
    <Button variant="outline">Auto-Start</Button>
  </Tooltip>

  <Tooltip label="Auto end" placement="auto-end">
    <Button variant="outline">Auto-End</Button>
  </Tooltip>

  <Tooltip label="Left end" placement="left-end">
    <Button variant="outline">Left-End</Button>
  </Tooltip>
</Flex>

<Flex flexDirection="flex-col" alignItems="items-center" space="space-y-6">
  <Tooltip label="Right end" placement="right-end">
    <Button variant="outline">Right-End</Button>
  </Tooltip>
  <Tooltip label="Left" placement="left">
    <Button variant="outline">Left</Button>
  </Tooltip>
  <Tooltip label="Auto start" placement="auto-start">
    <Button variant="outline">Auto-Start</Button>
  </Tooltip>
  <Tooltip label="Auto end" placement="auto-end">
    <Button variant="outline">Auto-End</Button>
  </Tooltip>
  <Tooltip label="Left end" placement="left-end">
    <Button variant="outline">Left-End</Button>
  </Tooltip>
</Flex>

Props

Name	Type	Default	Description
`disabled`	`boolean`		Whether to show the tooltip.
`open`	`boolean`		If `true`, the tooltip is shown.
`defaultOpen`	`boolean`		If `true`, the tooltip is initially shown.
`label`	`React.ReactNode`		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.
`openDelay`	`number`		The delay in `ms` for the tooltip to open.
`closeDelay`	`number`		The delay in `ms` for the tooltip to close.
`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`
`hoverable`	`boolean`		Whether the tooltip should be hoverable and stay open while hovered.
`hoverDelay`	`boolean`		The time to wait to allow for leaving the trigger and entering the tooltip.
`onOpen`	`function`		Function called when the tooltip shows.
`onClose`	`function`		Function called when the tooltip hides.

Sajari UI

Tooltip

Import

Usage

Editable Example

With an icon

Editable Example

Tooltip with focusable content

Editable Example

Hoverable Tooltip

Editable Example

Placement

Editable Example

Props