Live demo — this example is server-driven; run the showcase locally for the interactive version.
Tooltip
Use Tooltip straight from a Qute template — parameters and slots instead of Java builders. This reference is generated
from the runtime template sources: each template documents its parameters and slots in the header comment shown
beneath its include line.
Tooltip — PatternFly v6. Wraps a trigger and shows the tip on hover / focus
(PF's default 300ms delay), positioned 15px from the trigger and lifted above
page content. Requires /web/js/alpine/components/tooltip.js and
/web/css/components/tooltip.css on the host page.
Optional: id — DOM id on the tip; the trigger references it via aria-describedby.
position (top | bottom | left | right — default top; also the 8 diagonal
variants top-left, top-right, bottom-left, bottom-right,
left-top, left-bottom, right-top, right-bottom — the bubble's
edge aligns with the trigger's matching edge).
textAlignLeft — pf-m-text-align-left on the content (multi-line tips).
ariaLive (off | polite) — aria-live on the tip; use polite when the tip's
content changes while open (dynamic-content pattern).
Slots: {#trigger} — the hover/focus target (button, icon button, link).
{#tip} — the tooltip text.
Model mode: pass tooltip=<org.sitenetsoft.quarkus.pha.model.Tooltip> — the trigger is a composed Button model.