Tooltip
Contextual hint shown when its target is hovered or focused, rendered in the top layer.
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
placement | Placement | top | Preferred side; flips when there is no room. |
position | string | undefined | undefined | Legacy: comma-separated list of allowed placements (`"top,bottom"`). When set, the best of those is chosen automatically instead of `placement`. |
delay | number | 300 | Delay before showing, in milliseconds. |
hide-delay | number | 0 | Delay before hiding, in milliseconds. |
hide-arrow | boolean | false | |
target-strategy | 'parent' | 'previousElement' | parent | `parent` (default) or `previousElement`; ignored when `for` is set. |
for | string | undefined | undefined | Id of the target element (same document or shadow root). |
open | boolean | false | Visible state. Set it to show or hide the tooltip programmatically. |
Events
| Name | Type | Description |
|---|---|---|
show | Event | Fired when the tooltip becomes visible. |
hide | Event | Fired when it starts hiding. |
CSS custom properties
Grouped by the element and state they target. Click a group to collapse it; click a name to copy it.
| Name | Type | Default | Description |
|---|---|---|---|
--c2-tooltip--background-color | background-color | #18181b | |
--c2-tooltip--color | color | #fafafa | |
--c2-tooltip--border-radius | border-radius | 6px | |
--c2-tooltip--box-shadow | box-shadow | 0 4px 12px rgba(0, 0, 0, 0.15) | |
--c2-tooltip--border | border | — | |
--c2-tooltip--font-size | font-size | 12px | |
--c2-tooltip--font-weight | font-weight | 500 | |
--c2-tooltip--font-style | font-style | — | |
--c2-tooltip--font-family | font-family | — | |
--c2-tooltip--line-height | line-height | 1.4 | |
--c2-tooltip--padding-top | padding | 5px | |
--c2-tooltip--padding-right | padding | 8px | |
--c2-tooltip--padding-bottom | padding | 5px | |
--c2-tooltip--padding-left | padding | 8px | |
--c2-tooltip--max-width | pixel | 240px | |
--c2-tooltip--offset | pixel | 8px | Distance between the target and the tooltip (arrow included). |
--c2-tooltip--transition-duration | time | 120ms | |
--c2-tooltip--enter-transform | transform | scale(0.92) | Start of the enter animation. |
--c2-tooltip__arrow--size | pixel | 8px | Side of the arrow square; `0px` hides it like `hide-arrow`. |