Tooltip Positions & Colors
Top
Right
Bottom
Left
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
Right
Bottom
Left
Code Examples
Tooltips
<!-- Basic -->
<Tooltip text="Tooltip text">Hover</Tooltip>
<!-- Positions: right, bottom, left (default: top) -->
<Tooltip text="..." position="bottom">...</Tooltip>
<!-- Colors: primary, success, warning, danger -->
<Tooltip text="..." variant="success">...</Tooltip>
<!-- Multiline -->
<Tooltip text="..." multiline>...</Tooltip>Popovers
<!-- Basic -->
<Popover titleText="Title" placement="bottom">
<p>Rich <strong>HTML</strong> content.</p>
</Popover>
<!-- Sizes: sm, lg (default: medium) -->
<Popover titleText="Title" size="lg">...</Popover>
<!-- Custom trigger -->
<Popover titleText="Title">
{#snippet trigger()}<i class="icon"></i>{/snippet}
<p>Content</p>
</Popover>