Tooltip adds a CSS-driven hover label to any element — no JavaScript required. Position it above, below, left, or right of the trigger, and set the tip prop for the label text.
Basic Tooltip
<c-lb.tooltip tip="Hello!">
<c-lb.button>Hover me</c-lb.button>
</c-lb.tooltip>
Placements
<div class="flex flex-wrap gap-4 p-8">
<c-lb.tooltip tip="Top" placement="top">
<c-lb.button>Top</c-lb.button>
</c-lb.tooltip>
<c-lb.tooltip tip="Bottom" placement="bottom">
<c-lb.button>Bottom</c-lb.button>
</c-lb.tooltip>
<c-lb.tooltip tip="Left" placement="left">
<c-lb.button>Left</c-lb.button>
</c-lb.tooltip>
<c-lb.tooltip tip="Right" placement="right">
<c-lb.button>Right</c-lb.button>
</c-lb.tooltip>
</div>
Color Variants
<div class="flex flex-wrap gap-x-4 gap-y-12 p-8">
<c-lb.tooltip tip="Neutral" variant="neutral" open>
<c-lb.button>Neutral</c-lb.button>
</c-lb.tooltip>
<c-lb.tooltip tip="Primary" variant="primary" open>
<c-lb.button variant="primary">Primary</c-lb.button>
</c-lb.tooltip>
<c-lb.tooltip tip="Secondary" variant="secondary" open>
<c-lb.button variant="secondary">Secondary</c-lb.button>
</c-lb.tooltip>
<c-lb.tooltip tip="Accent" variant="accent" open>
<c-lb.button variant="accent">Accent</c-lb.button>
</c-lb.tooltip>
<c-lb.tooltip tip="Info" variant="info" open>
<c-lb.button variant="info">Info</c-lb.button>
</c-lb.tooltip>
<c-lb.tooltip tip="Success" variant="success" open>
<c-lb.button variant="success">Success</c-lb.button>
</c-lb.tooltip>
<c-lb.tooltip tip="Warning" variant="warning" open>
<c-lb.button variant="warning">Warning</c-lb.button>
</c-lb.tooltip>
<c-lb.tooltip tip="Error" variant="error" open>
<c-lb.button variant="error">Error</c-lb.button>
</c-lb.tooltip>
</div>
Force Open
<c-lb.tooltip tip="I'm always visible" variant="primary" open>
<c-lb.button variant="primary">Force Open</c-lb.button>
</c-lb.tooltip>
API Reference
c-lb.tooltip
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| tip | string | - | No | Tooltip text (sets data-tip attribute) |
| placement |
top
bottom
left
right
|
top
|
No | Tooltip position |
| variant |
neutral
primary
secondary
accent
info
success
warning
error
|
- | No | Tooltip color variant |
| open | boolean |
False
|
No | Force tooltip to stay open |
| Slot Name | Description |
|---|---|
| default | Element that triggers the tooltip on hover |
c-lb.tooltip.content
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| Slot Name | Description |
|---|---|
| default | Custom tooltip HTML content |