Tooltip

Shows a short description on hover or focus, built on React Aria. Tooltip.Root takes the trigger and the content as siblings — the trigger is whatever focusable element you put first.

import { Tooltip } from "@pockets-ui/components"

A tooltip is supplementary: it can't be reached by touch or by a screen reader cursor, so never put information there that isn't available some other way. Give the trigger its own accessible name rather than relying on the tooltip for it.

Basic

Code

import { Button, Tooltip } from "@pockets-ui/components"

export default function TooltipBasic() {
  return (
    <>
      <Tooltip.Root>
        <Button aria-label="Save">Save</Button>
        <Tooltip.Content>Save your changes</Tooltip.Content>
      </Tooltip.Root>
      <Tooltip.Root>
        <Button aria-label="Archive">Archive</Button>
        <Tooltip.Content>Move to the archive</Tooltip.Content>
      </Tooltip.Root>
    </>
  )
}

Placement

Code

import { Button, Tooltip } from "@pockets-ui/components"

export default function TooltipPlacement() {
  return (
    <>
      <Tooltip.Root>
        <Button>Top</Button>
        <Tooltip.Content placement="top">Shown above</Tooltip.Content>
      </Tooltip.Root>
      <Tooltip.Root>
        <Button>Bottom</Button>
        <Tooltip.Content placement="bottom">Shown below</Tooltip.Content>
      </Tooltip.Root>
      <Tooltip.Root>
        <Button>Left</Button>
        <Tooltip.Content placement="left">Shown to the left</Tooltip.Content>
      </Tooltip.Root>
      <Tooltip.Root>
        <Button>Right</Button>
        <Tooltip.Content placement="right">Shown to the right</Tooltip.Content>
      </Tooltip.Root>
    </>
  )
}

Warmup delay

Tooltips wait 1500ms before appearing on hover so a mouse crossing the screen doesn't trail popups behind it. Set delay={0} where the tooltip is the primary affordance — icon-only toolbars, for instance. closeDelay tunes the cooldown on the way out.

Code

import { Button, Tooltip } from "@pockets-ui/components"

export default function TooltipNoDelay() {
  return (
    <Tooltip.Root delay={0}>
      <Button>Instant</Button>
      <Tooltip.Content>Appears without the warmup delay</Tooltip.Content>
    </Tooltip.Root>
  )
}