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 |
|---|---|---|---|
Prop open | Type boolean | Default value undefined | Description Controlled open state. Use with onOpenChange for controlled hover cards. |
Prop defaultOpen | Type boolean | Default value false | Description Default open state for uncontrolled hover cards |
Prop onOpenChange | Type (open: boolean) => void | Default value undefined | Description Callback when hover card open state changes. Receives the new open state. |
Prop openDelay | Type number | Default value 700 | Description Delay in milliseconds before opening the hover card after hover starts |
Prop closeDelay | Type number | Default value 300 | Description Delay in milliseconds before closing the hover card after hover ends |
HoverCard.Content Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop showArrow | Type boolean | Default value false | Description Whether to display an arrow pointing to the trigger element |
Prop side | Type "top" | "right" | "bottom" | "left" | Default value "top" | Description Side of the trigger element where the hover card should appear |
Prop sideOffset | Type number | Default value 0 | Description Distance in pixels from the trigger element along the side axis |
Prop align | Type "start" | "center" | "end" | Default value "center" | Description Alignment of the hover card relative to the trigger element |
Prop alignOffset | Type number | Default value 0 | Description Distance in pixels from the trigger element along the align axis |
Prop forceMount | Type boolean | Default value false | Description Whether to force mount the content (useful for animations) |
Prop container | Type HTMLElement | null | Default value undefined | Description Container element to render the hover card into (for portals) |
Quick Start
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
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
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>
)
}