Package org.patternfly.component.tooltip

package org.patternfly.component.tooltip
Provides a tooltip component for displaying contextual information on hover or focus.

A tooltip is a small overlay that appears near a trigger element to provide additional information. Tooltips are referenced by a CSS selector pointing to the trigger element, support configurable placements (top, bottom, left, right), dynamic content updates, and close event handlers.

Key Classes

Usage

Create a tooltip attached to a trigger element: 

import static org.jboss.elemento.By;
import static org.patternfly.component.button.Button.button;
import static org.patternfly.component.tooltip.Tooltip.tooltip;

button("Hover me").primary().id("my-button");
tooltip(By.id("my-button"), "This is a tooltip");

Create a tooltip with placement and dynamic content: 

import static org.jboss.elemento.By;
import static org.patternfly.component.tooltip.Tooltip.tooltip;
import static org.patternfly.style.Placement.bottom;

Tooltip tooltip = tooltip(By.id("copy-button"), "Copy to clipboard")
        .placement(bottom)
        .onClose((e, t) -> t.text("Copy to clipboard"));

// Update content dynamically
tooltip.text("Successfully copied!");
See Also:
  • Class
    Description
    PopperTooltip
    Deprecated.
    This implementation uses the Popper.js API, which is due to be removed soon.
    Tooltip
    A tooltip is in-app messaging used to identify elements on a page with short, clarifying text.
    TooltipToggle
     
    TriggerAria