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.

Templates

tooltip

{#include components/feedback/tooltip /}
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.