Hover tooltips for quick info, click popovers for rich interactive content.
Tooltip Positions & Colors
Top
Right
Bottom
Left
Default
Primary
Success
Warning
Danger
Buttons & Icon-Only
Regular buttons:
Icon-only buttons:
Multiline Tooltips
Use .pa-tooltip--multiline 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:
Popover Positions
Top
Top
Appears above trigger.
Right
Right
Appears to the right.
Bottom
Bottom
Appears below trigger.
Left
Left
Appears to the left.
Code Examples
Tooltips
<!-- Basic -->
<span class="pa-tooltip" data-tooltip="Text">Hover</span>
<!-- Positions: --right, --bottom, --left -->
<span class="pa-tooltip pa-tooltip--bottom">...</span>
<!-- Colors: --primary, --success, --warning, --danger -->
<span class="pa-tooltip pa-tooltip--success">...</span>
<!-- Multiline -->
<span class="pa-tooltip pa-tooltip--multiline">...</span>Popovers
<div class="pa-popover" data-placement="bottom">
<button class="pa-popover__trigger">?</button>
<div class="pa-popover__content">
<div class="pa-popover__header">
<h4>Title</h4>
<button class="pa-popover__close">×</button>
</div>
<div class="pa-popover__body">
<p>Rich <strong>HTML</strong> content.</p>
</div>
</div>
</div>
<!-- Sizes: --sm, default, --lg -->
<!-- Positions: data-placement="top|right|bottom|left" -->