---
title: Tooltip
description: The Tooltip component provides contextual information to users when they hover over or focus on an element.
category: Overlays
related: [Popover, Button, Icon]
commonPatterns: [help-tooltip, icon-tooltip, hover-tooltip]
---

Source: https://clickhouse.design/click-ui/tooltip

# Tooltip

Tooltip provides contextual information to users when they hover over or focus on an element. It's perfect for providing additional context, help text, or explanations without cluttering the interface.

If the tooltip explains why a control is unavailable, the trigger must use `aria-disabled` rather than `disabled` — otherwise it can't be focused and the tooltip is unreachable by keyboard and screen reader. See [Availability states](/click-ui/availability).

## Example

## Props

| Prop        | Type                                     | Default value | Description                                                  |
| ----------- | ---------------------------------------- | ------------- | ------------------------------------------------------------ |
| side        | `"top" \| "bottom" \| "left" \| "right"` | `"top"`       | Side of the trigger element where the tooltip should appear  |
| showArrow   | `boolean`                                | `false`       | Whether to display an arrow pointing to the trigger element  |
| defaultOpen | `boolean`                                | `false`       | Whether the tooltip should be open by default (uncontrolled) |

```tsx
import { Tooltip, Text } from '@clickhouse/click-ui'

<Tooltip>
<Tooltip.Trigger>
  <Text>Hover over me</Text>
</Tooltip.Trigger>
<Tooltip.Content showArrow={true}>
  Tooltip content
</Tooltip.Content>
</Tooltip>
```

## Quick start

```tsx
import { Tooltip, Button } from '@clickhouse/click-ui'

function MyTooltip() {
return (
  <Tooltip>
    <Tooltip.Trigger>
      <Button label="Hover me" />
    </Tooltip.Trigger>
    <Tooltip.Content showArrow={true}>
      This is helpful information
    </Tooltip.Content>
  </Tooltip>
)
}
```

## Related components

- **Popover**: For more complex content that can be clicked and interacted with.
- **Button**: Commonly used as a tooltip trigger.
- **Icon**: Icons often have tooltips to explain their purpose.

## Common use cases

### Help tooltip

```tsx
import { Tooltip, Icon, Container, Text } from '@clickhouse/click-ui'

function HelpTooltip() {
return (
  <Container orientation='horizontal' gap='sm' alignItems='center'>
    <Text>Password</Text>
    <Tooltip>
      <Tooltip.Trigger>
        <Icon name="info" size="sm" />
      </Tooltip.Trigger>
      <Tooltip.Content showArrow={true}>
        Password must be at least 8 characters
      </Tooltip.Content>
    </Tooltip>
  </Container>
)
}
```

### Icon tooltip

```tsx
import { Tooltip, Icon, Container } from '@clickhouse/click-ui'

function IconTooltip() {
return (
  <Tooltip>
    <Tooltip.Trigger>
      <Icon name="settings" size="md" />
    </Tooltip.Trigger>
    <Tooltip.Content showArrow={true}>
      Settings
    </Tooltip.Content>
  </Tooltip>
)
}
```

### Button tooltip

```tsx
import { Tooltip, Button } from '@clickhouse/click-ui'

function ButtonTooltip() {
return (
  <Tooltip>
    <Tooltip.Trigger>
      <Button label="Save" type="primary" />
    </Tooltip.Trigger>
    <Tooltip.Content showArrow={true} side="bottom">
      Save your changes
    </Tooltip.Content>
  </Tooltip>
)
}
```