Tooltip

A short description of one child, shown on hover, keyboard focus and a long touch - a role="tooltip" in a Portal, placed beside its child and flipped for want of room.

Source

A short description of one child, shown on hover, keyboard focus and a long touch - a role="tooltip" in a Portal, placed beside its child and flipped for want of room. It opens and closes after their delays, stays open while the pointer is on the tooltip itself (so its text can be read and selected), closes on Escape, and never takes or traps the focus. The text is yours: no built-in English.

import { Tooltip } from '@soroush.tech/design-system/Tooltip'

;<Tooltip title="Save the page" placement="bottom" hasArrow>
  <IconButton aria-label="Save">...</IconButton>
</Tooltip>

Examples

Default

const args: Partial<TooltipProps> = { title: 'Save the page' }

<Tooltip {...args}>
  <Button variant="outlined">Hover or focus me</Button>
</Tooltip>

With An Arrow

const args: Partial<TooltipProps> = { title: 'Save the page', placement: 'bottom', hasArrow: true }

<Tooltip {...args}>
  <Button variant="outlined">Arrow</Button>
</Tooltip>

Placements

const args: Partial<TooltipProps> = { title: 'Save the page' }

<Flex flexDirection="row" gap={2} flexWrap="wrap">
  {tooltipPlacementValues.map((placement) => (
    <Tooltip key={placement} {...args} placement={placement} title={placement}>
      <Button variant="outlined" size="sm">
        {placement}
      </Button>
    </Tooltip>
  ))}
</Flex>

Names An Icon

const args: Partial<TooltipProps> = { title: 'Save the page' }

<Tooltip {...args} title="Star the page">
  <Button variant="text">
    <Icon name="star" size="1.25em" color="inherit" />
  </Button>
</Tooltip>

Over ADisabled Button

Fill in the name first

const args: Partial<TooltipProps> = {
  title: 'Fill in the name first',
  shouldDescribeChild: true,
  isDescriptionPersistent: true,
}

<Tooltip {...args}>
  <Button variant="outlined" disabled>
    Save
  </Button>
</Tooltip>

Not Interactive

const args: Partial<TooltipProps> = { title: 'Layers', placement: 'right', isInteractive: false }

<Flex gap={1} alignItems="center">
  <Tooltip {...args}>
    <Button variant="outlined">Rail</Button>
  </Tooltip>
  <Button variant="outlined">Row</Button>
</Flex>

In AGroup

const args: Partial<TooltipProps> = { title: 'Save the page', enterDelay: 500 }

<TooltipGroup skipDelayDuration={300}>
  <Flex gap={1}>
    {['Layers', 'Assets', 'Pages'].map((title) => (
      <Tooltip key={title} {...args} title={title}>
        <Button variant="outlined">{title}</Button>
      </Tooltip>
    ))}
  </Flex>
</TooltipGroup>

At APoint

const args: Partial<TooltipProps> = {
  title: 'Move the track',
  isOpen: true,
  anchorPosition: { top: 160, left: 200 },
}

<View height="240px">
  <Tooltip {...args} />
</View>

Describes AButton

const args: Partial<TooltipProps> = { title: 'Writes the page to your drafts', shouldDescribeChild: true }

<Tooltip {...args}>
  <Button variant="outlined">Save</Button>
</Tooltip>

Open

const args: Partial<TooltipProps> = { title: 'Save the page' }

<Tooltip {...args} defaultOpen>
  <Button variant="outlined">Always open</Button>
</Tooltip>