Components / Tooltip
Tooltip
Hover/focus tooltip with CSS arrow, fade+scale animation, viewport-aware auto-repositioning, configurable delay, rich HTML content slot, and disabled state.
overlays v0.5.0
Playground
Examples
All positions
<cg-stack direction="row" gap="lg"><cg-tooltip content="Top tooltip" position="top"><cg-button>Top</cg-button></cg-tooltip><cg-tooltip content="Bottom tooltip" position="bottom"><cg-button>Bottom</cg-button></cg-tooltip><cg-tooltip content="Left tooltip" position="left"><cg-button>Left</cg-button></cg-tooltip><cg-tooltip content="Right tooltip" position="right"><cg-button>Right</cg-button></cg-tooltip></cg-stack>Import
import { CgTooltip } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-tooltip';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | "" | Tooltip text (or use slot="content" for rich HTML) |
position | "top" | "bottom" | "left" | "right" | "top" | Preferred position (auto-adjusts if clipped by viewport) |
delay | number | 300 | Show delay in ms |
disabled | boolean | false | Disable the tooltip |
rounded | "none" | "sm" | "md" | "lg" | "full" | "md" | Border radius variant |