CSS-only tooltips and click-triggered popovers for contextual information.
Tooltip Positions & Colors
Top
End
Bottom
Start
Default
Primary
Success
Warning
Danger
Theme colors (color-1 to color-9):
1
2
3
4
5
6
7
8
9
Buttons & Icon-Only
Regular buttons:
Icon-only buttons:
Multiline Tooltips
Use multiline prop for longer text (20rem width, left-aligned):
Inline Text Tooltips
Tooltips can explain API terms, CSS , or HTML abbreviations.
Popovers - Interactive Help
Rich content with links, formatting. Click ? to open:
Text alignment variants:
Popover Positions
Top
Top
Appears above trigger.
End
End
Appears at the inline-end.
Bottom
Bottom
Appears below trigger.
Start
Start
Appears at the inline-start.