Components
Tooltip
Hover tooltip with customizable placement, delay, colors, and arrow. Ideal for supplementary information.
import{ Tooltip }from"oks-ui"
12 placementsDelay controlColor rolesArrow indicatorAuto-flip
Placements
Tooltips can be positioned on any side.
Interactive Playground
Controls
Preview
Generated Code
<Tooltip />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Tooltip content (required). |
| placement | "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | "top" | Tooltip placement. |
| color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "default" | Tooltip color. |
| size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | "md" | Tooltip size. |
| delay | number | 0 | Show delay in ms. |
| closeDelay | number | 0 | Hide delay in ms. |
| showArrow | boolean | true | Show arrow pointer. |
| shouldFlip | boolean | true | Flip to stay in viewport. |
| offset | number | 7 | Offset from the trigger element. |
content—
ReactNode
Tooltip content (required).
placement"top"
"top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end"
Tooltip placement.
color"default"
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"
Tooltip color.
size"md"
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Tooltip size.
delay0
number
Show delay in ms.
closeDelay0
number
Hide delay in ms.
showArrowtrue
boolean
Show arrow pointer.
shouldFliptrue
boolean
Flip to stay in viewport.
offset7
number
Offset from the trigger element.