Hover tooltips for quick info, click popovers for rich interactive content.
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 .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:
Text alignment variants:
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" -->CSS Classes Reference
Tooltips (CSS-only)
pa-tooltip- Base class (usesdata-tooltip="..."attribute)pa-tooltip--right- Position right of elementpa-tooltip--bottom- Position below elementpa-tooltip--left- Position left of elementpa-tooltip--multiline- Wrap long text (fixed width)pa-tooltip--help- Help cursor style
Tooltip Colors
pa-tooltip--primary- Primary/accent colorpa-tooltip--success- Success (green)pa-tooltip--warning- Warning (yellow)pa-tooltip--danger- Danger (red)pa-tooltip--color-1through--color-9- Theme colors
Floating Tooltips (JS-powered)
pa-tooltip--floating- Disables CSS tooltip (for JS control)pa-tooltip-floating- Portal-rendered tooltip element
Popovers
pa-popover- Base popover containerpa-popover--sm- Small sizepa-popover--lg- Large sizepa-popover--center- Center-aligned body textpa-popover--right- Right-aligned body textdata-placement="top|right|bottom|left"- Position attribute
Popover Sub-elements
pa-popover__trigger- Trigger button (? icon)pa-popover__content- Content container (hidden by default)pa-popover__header- Header with title and close buttonpa-popover__body- Body content areapa-popover__close- Close button