Tooltip

A tooltip renders a popover that displays additional information about a target element.

Usage

A tooltip can be rendered by using the TooltipTrigger component, in combination with the Tooltip component. Each tooltip has a warm up and cool down period. The warm up is a global timer, which defines how long a cursor needs to be on any element that renders a tooltip, before it will show up. If the period is reached, the tooltip will show immediately, if you hover over the same or a different element which also renders a tooltip. The cool down period specifies, how long you have to hover away from the tooltip before it will hide and require the warm up period to complete again.

<TooltipTrigger>
  <Button>
    Delete
  </Button>
  <Tooltip>This action cannot be undone.</Tooltip>
</TooltipTrigger>

<TooltipTrigger>
  <Button>
    Delete
  </Button>
  <Tooltip>This action cannot be undone.</Tooltip>
</TooltipTrigger>

<TooltipTrigger>
  <Button>
    Delete
  </Button>
  <Tooltip>
    This action cannot
    be undone.
  </Tooltip>
</TooltipTrigger>

Direction

By default, the tooltip component opens to the bottom. If the window does not offer enough space to fully open the tooltip, it automatically opens it to the top. However, you can control this behaviour yourself via the placement prop.

<TooltipTrigger placement='top'>
  <Button>
    Top
  </Button>
  <Tooltip>This tooltip is rendered on the top.</Tooltip>
</TooltipTrigger>

<TooltipTrigger placement='top'>
  <Button>
    Top
  </Button>
  <Tooltip>This tooltip is rendered on the top.</Tooltip>
</TooltipTrigger>

<TooltipTrigger placement="top">
  <Button>
    Top
  </Button>
  <Tooltip>
    This tooltip is
    rendered on the
    top.
  </Tooltip>
</TooltipTrigger>

<TooltipTrigger placement='bottom'>
  <Button>
    Bottom
  </Button>
  <Tooltip>This tooltip is rendered on the bottom.</Tooltip>
</TooltipTrigger>

<TooltipTrigger placement='bottom'>
  <Button>
    Bottom
  </Button>
  <Tooltip>This tooltip is rendered on the bottom.</Tooltip>
</TooltipTrigger>

<TooltipTrigger placement="bottom">
  <Button>
    Bottom
  </Button>
  <Tooltip>
    This tooltip is
    rendered on the
    bottom.
  </Tooltip>
</TooltipTrigger>

<TooltipTrigger placement='left'>
  <Button>
    Left
  </Button>
  <Tooltip>This tooltip is rendered on the left.</Tooltip>
</TooltipTrigger>

<TooltipTrigger placement='left'>
  <Button>
    Left
  </Button>
  <Tooltip>This tooltip is rendered on the left.</Tooltip>
</TooltipTrigger>

<TooltipTrigger placement="left">
  <Button>
    Left
  </Button>
  <Tooltip>
    This tooltip is
    rendered on the
    left.
  </Tooltip>
</TooltipTrigger>

<TooltipTrigger placement='right'>
  <Button>
    Right
  </Button>
  <Tooltip>This tooltip is rendered on the right.</Tooltip>
</TooltipTrigger>

<TooltipTrigger placement='right'>
  <Button>
    Right
  </Button>
  <Tooltip>This tooltip is rendered on the right.</Tooltip>
</TooltipTrigger>

<TooltipTrigger placement="right">
  <Button>
    Right
  </Button>
  <Tooltip>
    This tooltip is
    rendered on the
    right.
  </Tooltip>
</TooltipTrigger>

Offset

By default, the tooltip has a small offset from the trigger element. However, you can change this through the offset and crossOffset prop.

<TooltipTrigger offset={50}>
  <Button>
    Offset
  </Button>
  <Tooltip>This tooltip renders with an offset.</Tooltip>
</TooltipTrigger>

<TooltipTrigger offset={50}>
  <Button>
    Offset
  </Button>
  <Tooltip>This tooltip renders with an offset.</Tooltip>
</TooltipTrigger>

<TooltipTrigger
  offset={50}
>
  <Button>
    Offset
  </Button>
  <Tooltip>
    This tooltip
    renders with an
    offset.
  </Tooltip>
</TooltipTrigger>

<TooltipTrigger crossOffset={200} placement='bottom'>
  <Button>
    Cross Offset
  </Button>
  <Tooltip>This tooltip renders with a cross offset.</Tooltip>
</TooltipTrigger>

<TooltipTrigger crossOffset={200} placement="bottom">
  <Button>
    Cross Offset
  </Button>
  <Tooltip>
    This tooltip renders with a cross offset.
  </Tooltip>
</TooltipTrigger>

<TooltipTrigger
  crossOffset={200}
  placement="bottom"
>
  <Button>
    Cross Offset
  </Button>
  <Tooltip>
    This tooltip
    renders with a
    cross offset.
  </Tooltip>
</TooltipTrigger>

Disabling

The tooltip can be disabled, without disabling the trigger element it would normally display on.

<TooltipTrigger isDisabled>
  <Button onPress={() => alert('The trigger still works.')}>
    Disabled Tooltip
  </Button>
  <Tooltip>I am disabled.</Tooltip>
</TooltipTrigger>

<TooltipTrigger isDisabled>
  <Button onPress={() => alert('The trigger still works.')}>
    Disabled Tooltip
  </Button>
  <Tooltip>I am disabled.</Tooltip>
</TooltipTrigger>

<TooltipTrigger
  isDisabled
>
  <Button
    onPress={() =>
      alert(
        'The trigger still works.'
      )}
  >
    Disabled Tooltip
  </Button>
  <Tooltip>
    I am disabled.
  </Tooltip>
</TooltipTrigger>

Delay

By default, the tooltip will have a delay before it shows up to avoid accidentally showing them. You can control the delay by the delay prop.

function Example() {
  const [delay, setDelay] = useState(1500);

  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
      <NumberField 
        label='Delay (in ms)' 
        value={delay} 
        onChange={setDelay} 
      />
      <TooltipTrigger delay={delay}>
        <Button>
          Hover me
        </Button>
        <Tooltip>I am a tooltip.</Tooltip>
      </TooltipTrigger>
    </div>
  )
}

function Example() {
  const [delay, setDelay] = useState(1500);

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '8px'
      }}
    >
      <NumberField
        label="Delay (in ms)"
        value={delay}
        onChange={setDelay}
      />
      <TooltipTrigger delay={delay}>
        <Button>
          Hover me
        </Button>
        <Tooltip>I am a tooltip.</Tooltip>
      </TooltipTrigger>
    </div>
  );
}

function Example() {
  const [
    delay,
    setDelay
  ] = useState(1500);

  return (
    <div
      style={{
        display: 'flex',
        flexDirection:
          'column',
        gap: '8px'
      }}
    >
      <NumberField
        label="Delay (in ms)"
        value={delay}
        onChange={setDelay}
      />
      <TooltipTrigger
        delay={delay}
      >
        <Button>
          Hover me
        </Button>
        <Tooltip>
          I am a tooltip.
        </Tooltip>
      </TooltipTrigger>
    </div>
  );
}