---
title: Popover
description: Popover displays contextual content in a floating panel triggered by user interaction.
category: Overlays
related: [Tooltip, HoverCard, Button]
commonPatterns: [info-popover, action-popover]
---

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

# Popover

Popover is used to display additional contextual information or actions without navigating away from the current page. Unlike tooltips, popovers can contain interactive content and remain open when clicked.

## Example

## Props

| Prop      | Type                                     | Default value | Description                                                           |
| --------- | ---------------------------------------- | ------------- | --------------------------------------------------------------------- |
| open      | `boolean`                                | `undefined`   | Controlled open state. Use with onOpenChange for controlled popovers. |
| modal     | `boolean`                                | `false`       | Whether the popover is modal (blocks interaction with rest of page)   |
| side      | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'`    | Side of the trigger element where the popover should appear           |
| showArrow | `boolean`                                | `false`       | Whether to display an arrow pointing to the trigger element           |
| showClose | `boolean`                                | `false`       | Whether to show a close button (X) in the popover header              |

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

function MyPopover() {
return (
  <Popover>
    <Popover.Trigger>
      <Button type="primary" label="Open Popover" />
    </Popover.Trigger>
    <Popover.Content side="bottom" showArrow>
      Content here
    </Popover.Content>
  </Popover>
)
}
```

## Quick start

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

function MyPopover() {
return (
  <Popover>
    <Popover.Trigger>
      <Button type="primary" label="Info" />
    </Popover.Trigger>
    <Popover.Content side="bottom" showArrow padding="md" gap="sm">
      <Text size="lg">Information</Text>
      <Text size="sm" color="muted">This is helpful contextual content.</Text>
    </Popover.Content>
  </Popover>
)
}
```

## Related components

- **Tooltip**: For simple hover information without interactive content.
- **HoverCard**: For rich content that appears on hover.
- **Button**: Commonly used as a popover trigger.

## Common use cases

### Info popover

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

function InfoPopover() {
return (
  <Popover>
    <Popover.Trigger>
      <Button type="secondary" label="Learn More" />
    </Popover.Trigger>
    <Popover.Content side="bottom" showArrow padding="md" gap="sm">
      <Text size="lg">Feature Information</Text>
      <Text size="sm" color="muted">This feature allows you to manage your settings.</Text>
    </Popover.Content>
  </Popover>
)
}
```

### Action popover

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

function ActionPopover() {
return (
  <Popover>
    <Popover.Trigger>
      <Button type="secondary" label="Quick Actions" />
    </Popover.Trigger>
    <Popover.Content side="bottom" showArrow padding="md" gap="sm" showClose>
      <Text size="lg">Quick Actions</Text>
      <Container orientation='vertical' gap='xs'>
        <Button type="empty" label="Edit" fillWidth />
        <Button type="empty" label="Share" fillWidth />
      </Container>
    </Popover.Content>
  </Popover>
)
}
```