Introduction

The Tooltip component is used to describe icon buttons. In some cases tooltips are used to show more content, this should be used cautiously since it is hard to be completely accessible.

Each IconButton should always be wrapped in a Tooltip.

jsx

<Tooltip content="Edit title">
  <IconButton icon={EditIcon} />
</Tooltip>

Use with caution, it’s hard to be completely accessible.

jsx

<Tooltip content="Learn more about a feature">
  <InfoSignIcon />
</Tooltip>

Use with caution, it’s hard to be completely accessible.

jsx

<Tooltip content={<Paragraph margin={40}>Card appearance</Paragraph>} appearance="card">
  <InfoSignIcon />
</Tooltip>

The Tooltip can be positioned on the following positions using the position prop:

Position.TOP
Position.TOP_LEFT
Position.TOP_RIGHT
Position.BOTTOM
Position.BOTTOM_LEFT
Position.BOTTOM_RIGHT
Position.LEFT
Position.RIGHT

For a Tooltip the only really useful sides are TOP, RIGHT, BOTTOM and LEFT as shown below.

jsx

<Pane display="flex" justifyContent="space-between">
  <Tooltip content="Top" position={Position.TOP}>
    <IconButton icon={ArrowUpIcon} />
  </Tooltip>
  <Tooltip content="Right" position={Position.RIGHT}>
    <IconButton icon={ArrowRightIcon} />
  </Tooltip>
  <Tooltip content="Bottom" position={Position.BOTTOM}>
    <IconButton icon={ArrowDownIcon} />
  </Tooltip>
  <Tooltip content="Left" position={Position.LEFT}>
    <IconButton icon={ArrowLeftIcon} />
  </Tooltip>
</Pane>

In some cases you may want to only show a Tooltip when a certain condition is true. You can accomplish this by manually hiding the Tooltip with the isShown prop when it should never be shown, and leaving the component uncontrolled when you want it to display on hover (standard behavior).

jsx

function ConditionalTooltipExample() {
  const [showTooltipOnHover, setShowTooltipOnHover] = React.useState(false)
  const handleToggle = React.useCallback(
    () => setShowTooltipOnHover((prevShowTooltipOnHover) => !prevShowTooltipOnHover),
    []
  )
  return (
    <React.Fragment>
      <Checkbox
        checked={showTooltipOnHover}
        label="Show Tooltip on hover"
        marginBottom={majorScale(2)}
        onChange={handleToggle}
      />
      <Tooltip
        /* Setting isShown to undefined retains standard Tooltip behavior (shows on hover)
           Setting isShown to false ensures the Tooltip is never shown on hover */
        isShown={showTooltipOnHover ? undefined : false}
        content="This Tooltip is showing because the Checkbox is enabled."
      >
        <Button>Close</Button>
      </Tooltip>
    </React.Fragment>
  )
}

Introduction

Introduction

Tooltip with IconButton

Tooltip to show some content

Tooltip with card appearance

Positioning the Tooltip

Conditionally show Tooltip