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