Tooltip

Tooltip explains a control in a few words. It appears on hover and on keyboard focus.

import { Tooltip } from '@beyul/sulmu-ui'

Source · Figma

Examples

Basic

import { FilterIcon, IconButton, Tooltip } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Tooltip content="Filter the list">
      <IconButton aria-label="Filter" variant="secondary" icon={<FilterIcon />} />
    </Tooltip>
  )
}

Placement and long text

The text wraps at 240px.

top

bottom

left

right

Long text

import { Button, Flex, Tooltip } from '@beyul/sulmu-ui'

const placements = ['top', 'bottom', 'left', 'right'] as const

export default function Example() {
  return (
    <Flex gap={3} wrap justify="center">
      {placements.map((placement) => (
        <Tooltip key={placement} placement={placement} content={`Opens on the ${placement}`}>
          <Button variant="secondary" size="sm">
            {placement}
          </Button>
        </Tooltip>
      ))}
      <Tooltip content="This dashboard is powered by reports that are created in Analytics and refreshed every night.">
        <Button variant="tertiary" size="sm">
          Long text
        </Button>
      </Tooltip>
    </Flex>
  )
}

Props

Prop	Type	Default	Description
content*	ReactNode	-	The hint. Keep it short; it wraps at 240px.
children*	ReactElement<unknown, string | JSXElementConstructor<any>>	-	The element the hint describes. It must be focusable (a button, link or input).
placement	"bottom" | "top" | "left" | "right"	top	Where it appears. Default: top.
disabled	boolean	-	Whether the tooltip is disabled
open	boolean	-	The controlled open state of the tooltip
onOpenChange	((details: OpenChangeDetails) => void)	-	Function called when the tooltip is opened.

The remaining props of Ark UI’s Tooltip.Root are accepted too.

Accessibility and usage

• The child must be focusable (a button, link or input), or keyboard users cannot reach the hint.
• Do not put essential information in a tooltip: it is not available on touch screens.
• The tooltip opens after 300ms and closes after 100ms. Override with openDelay and closeDelay.
• A tooltip does not replace the aria-label of an Icon Button.