Package org.patternfly.overlay

package org.patternfly.overlay
Overlay management for floating UI elements such as tooltips and popovers.

This package provides a centralized controller for positioning, showing, and hiding overlay elements using the native Popover API and CSS Anchor Positioning. Components delegate all overlay behavior to this package, keeping their own code focused on component-specific concerns like DOM structure, ARIA attributes, and content.

Key Classes

  • Overlay - Centralized controller that combines anchor positioning, event listener registration, entry/exit delay timers, and show/hide lifecycle management
  • TriggerMode - Defines how an overlay responds to user interaction: hover, click, or manual control
  • CssPositioning - Detects browser support for CSS Anchor Positioning to determine whether to use native CSS positioning or JavaScript-based positioning

Usage

Create an overlay, configure its trigger, placement, and interaction mode, then bind it to a trigger element: 

import static org.patternfly.overlay.Overlay.overlay;

Overlay overlay = overlay(overlayElement, Placement.top)
    .trigger(() -> triggerElement)
    .triggerMode(TriggerMode.hover)
    .entryDelay(300)
    .exitDelay(300);

Positioning

The overlay supports two positioning strategies. When the browser supports CSS Anchor Positioning, the browser handles positioning natively using position-try-fallbacks. Otherwise, the overlay falls back to JavaScript-based positioning that calculates the best placement relative to the trigger element. Detection is automatic via CssPositioning.anchorNameSupported().

See Also:
  • Class
    Description
    CssPositioning
    Detects whether the browser supports CSS anchor positioning features, which enable native CSS-based overlay placement instead of JavaScript-based positioning.
    Overlay
    Centralized controller for native popover management.
    TriggerMode
    Defines how an Overlay responds to user interaction on its trigger element.