---
title: Hover card
description: Hover Card displays additional information in a popover when hovering over a trigger element.
category: Overlays
related: [Tooltip, Popover, Button]
commonPatterns: [user-hovercard, info-hovercard]
---

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

# Hover card

Hover Card displays contextual information in a popover that appears when hovering over a trigger element. It's useful for showing additional details without navigating away from the current page. Unlike tooltips, hover cards can contain rich content.

## Example

## Props

| Prop         | Type                      | Default value | Description                                                               |
| ------------ | ------------------------- | ------------- | ------------------------------------------------------------------------- |
| open         | `boolean`                 | `undefined`   | Controlled open state. Use with onOpenChange for controlled hover cards.  |
| defaultOpen  | `boolean`                 | `false`       | Default open state for uncontrolled hover cards                           |
| onOpenChange | `(open: boolean) => void` | `undefined`   | Callback when hover card open state changes. Receives the new open state. |
| openDelay    | `number`                  | `700`         | Delay in milliseconds before opening the hover card after hover starts    |
| closeDelay   | `number`                  | `300`         | Delay in milliseconds before closing the hover card after hover ends      |

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

<HoverCard>
<HoverCard.Trigger>
  <Button label="Hover me" />
</HoverCard.Trigger>
<HoverCard.Content showArrow>
  <Text>Additional information appears here.</Text>
</HoverCard.Content>
</HoverCard>
```

### HoverCard.Content Props

| Prop        | Type                                     | Default value | Description                                                      |
| ----------- | ---------------------------------------- | ------------- | ---------------------------------------------------------------- |
| showArrow   | `boolean`                                | `false`       | Whether to display an arrow pointing to the trigger element      |
| side        | `"top" \| "right" \| "bottom" \| "left"` | `"top"`       | Side of the trigger element where the hover card should appear   |
| sideOffset  | `number`                                 | `0`           | Distance in pixels from the trigger element along the side axis  |
| align       | `"start" \| "center" \| "end"`           | `"center"`    | Alignment of the hover card relative to the trigger element      |
| alignOffset | `number`                                 | `0`           | Distance in pixels from the trigger element along the align axis |
| forceMount  | `boolean`                                | `false`       | Whether to force mount the content (useful for animations)       |
| container   | `HTMLElement \| null`                    | `undefined`   | Container element to render the hover card into (for portals)    |

```tsx
<HoverCard.Content showArrow side="top" align="center">
<Text>Content here</Text>
</HoverCard.Content>
```

## Quick start

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

function MyHoverCard() {
return (
  <HoverCard>
    <HoverCard.Trigger>
      <Button label="Hover me" />
    </HoverCard.Trigger>
    <HoverCard.Content showArrow>
      <Text>Additional information appears here.</Text>
    </HoverCard.Content>
  </HoverCard>
)
}
```

## Related components

- **Tooltip**: For simple hover information without rich content.
- **Popover**: For click-triggered content instead of hover.
- **Button**: Commonly used as a hover card trigger.

## Common use cases

### User hover card

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

function UserHoverCard() {
return (
  <HoverCard>
    <HoverCard.Trigger>
      <Button label="John Doe" />
    </HoverCard.Trigger>
    <HoverCard.Content showArrow>
      <Container orientation='vertical' gap='sm'>
        <Text size='lg' weight='bold'>John Doe</Text>
        <Text size='sm' color='muted'>Software Engineer</Text>
      </Container>
    </HoverCard.Content>
  </HoverCard>
)
}
```

### Info hover card

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

function InfoHoverCard() {
return (
  <HoverCard>
    <HoverCard.Trigger>
      <Button label="Learn More" />
    </HoverCard.Trigger>
    <HoverCard.Content showArrow side="bottom">
      <Container orientation='vertical' gap='xs'>
        <Text size='lg' weight='bold'>Feature Information</Text>
        <Text size='sm'>This feature allows you to manage your settings.</Text>
      </Container>
    </HoverCard.Content>
  </HoverCard>
)
}
```

### Different positions