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.
Example
Hover over me
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop side | Type "top" | "bottom" | "left" | "right" | Default value "top" | Description Side of the trigger element where the tooltip should appear |
Prop showArrow | Type boolean | Default value false | Description Whether to display an arrow pointing to the trigger element |
Prop defaultOpen | Type boolean | Default value false | Description Whether the tooltip should be open by default (uncontrolled) |
Quick Start
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
Password
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
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
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>
)
}