---
title: Tooltip
category: Overlays
summary: Composes [Popover](/popover). Used to display a minimal amount of helpful information.
---

```jsx live
render(
  <StackView
    axis="horizontal"
    alignment="center"
    distribution="center"
    spacing={8}
  >
    <Tooltip placement="left" title="Tooltip">
      <Box>Left</Box>
    </Tooltip>
    <Tooltip placement="top" title="Tooltip">
      <Box>Top</Box>
    </Tooltip>
    <Tooltip placement="bottom" title="Tooltip">
      <Box>Bottom</Box>
    </Tooltip>
    <Tooltip placement="right" title="Tooltip">
      <Box>Right</Box>
    </Tooltip>
    <Button icon={{ name: 'search' }} tooltip={{ title: 'search' }} />
  </StackView>
)
```

```jsx live
render(
  <Tooltip
    title={
      <StackView width={24} spacing={1} cursor="default">
        <StackView axis="horizontal" alignment="center" spacing={1}>
          <Icon name="exclamation-circle-filled" size="md" color="error" />
          <Text fontSize={3} weight={500} color="error">
            Error
          </Text>
        </StackView>
        <Text fontSize={3} lineHeight={3}>
          This action is not permitted.
        </Text>
      </StackView>
    }
    openDelay={0}
    closeDelay={300}
    popoverProps={{
      textAlign: 'left',
      paddingHorizontal: 2,
      paddingVertical: 2,
      backgroundColor: 'surface',
      color: 'foreground',
      stroke: 'separator',
      strokeWeight: 1,
      elevation: 2,
    }}
  >
    <Text>Custom Tooltip</Text>
  </Tooltip>
)
```

```jsx live
render(() => {
  const ref = React.useRef()
  return (
    <StackView innerRef={ref} padding={4} backgroundColor="surfaceSecondary">
      <Tooltip title="Hello tooltip" popoverProps={{ relativeTo: ref }}>
        <Box>Tooltip relative to the parent view.</Box>
      </Tooltip>
    </StackView>
  )
})
```