Examples
Basic
Wrap a trigger in the {#trigger} slot and put the text in
{#tip}. Hover or focus the button — the tooltip appears after
PatternFly's 300ms delay and hides again on mouse-out / blur.
Positions
position = top | bottom |
left | right — the bubble sits on that side, 15px from the
trigger, above surrounding content.
Diagonal positions
The eight diagonal modifiers — top-left, bottom-right,
left-top, etc. The bubble's edge aligns with the trigger's matching edge instead of
centering on it, and PatternFly moves the arrow to the matching corner.
On icon
Tooltips commonly hang off a plain icon button. Give the button an
aria-label so assistive tech still announces it.
Long content
PatternFly caps the bubble at 18.75rem (300px); longer text wraps onto multiple lines
instead of stretching across the page.
Left aligned text
textAlignLeft=true adds pf-m-text-align-left to the content
— PatternFly centers tooltip text by default, which reads poorly once it wraps onto several lines.
Dynamic content
Click the copy button while the tooltip is open — the tip text swaps to a success message for 2s.
ariaLive="polite" makes assistive tech announce the change (PatternFly React's "on icon
with dynamic content" pattern).
Documentation
Tooltip props
Parameters accepted by
{#include components/feedback/tooltip ... /}. Model mode: pass
tooltip=<Tooltip> built in Java instead — the Java tab on each example shows the
builder.
| Name | Type | Description |
|---|---|---|
* {#trigger}
|
Slot | The hover / focus target — a button, icon button, or link. Must be focusable for keyboard users. |
* {#tip}
|
Slot |
The tooltip text (PF React's content prop). Wraps at 18.75rem.
|
position
|
top | bottom | left | right + 8 diagonals
|
Side of the trigger the bubble sits on. Default top. Diagonal variants (top-left, left-top, …) align the bubble's edge with the trigger's matching edge
instead of centering.
|
textAlignLeft
|
boolean |
Adds pf-m-text-align-left to the content — use for multi-line tips.
|
ariaLive
|
off | polite
|
aria-live on the tip. Use polite when the tip's
content changes while open, so assistive tech announces the change.
|
id
|
String |
DOM id on the tip; the trigger gets aria-describedby={id}. Recommended so
assistive tech links the two.
|
Implementation. PF React uses Popper.js in a portal. We get the same behaviour with a tiny
phaTooltip() Alpine component (hover/focus toggling with PF's 300ms delay) plus CSS
that positions the bubble 15px from the trigger and sets a high z-index so it sits
above neighbouring content — no Popper, no portal. Load tooltip.js +
tooltip.css
on the page.
Usage
Tooltips are a labelling tool, not a UI panel. Use them for short, single-line context — icon button labels, abbreviation expansions, full ISO timestamps. For longer help content use Popover.
Wire aria-describedby on the trigger. The trigger element should
reference the tooltip's id via aria-describedby so AT
consumers hear the tooltip text without needing to hover.