Tooltip

Usage

• Use Tooltip to provide supplementary context about a UI element -- not as a primary source of information.
• Use only static, non-interactive content inside a Tooltip. For interactive content, use Popover.
• Avoid redundant text that repeats what the trigger element already communicates.
• Use Popover instead when content is long-form or contains interactive elements.

Appearance

• Arrow visibility (withArrow, default true) -- keep the arrow visible to connect the Tooltip to its trigger, especially when multiple triggers are nearby.
• Hide the arrow (withArrow={false}) only in dense layouts where a cleaner look is needed.
• Trigger style (isUnderlined) -- apply underlined styling when the trigger is inline text to make it visually distinct as interactive.
• Inline layout (isInline, default true) -- renders the trigger as inline-flex. Set isInline={false} to use flex instead.

Behaviors

• Placement (placement, default "bottom") -- accepts "top", "right", "bottom", "left" and alignment variants (e.g., "top-start"). Choose a placement that avoids obscuring related content.
• Automatic repositioning -- the Tooltip repositions when it would overflow the viewport regardless of the chosen placement.
• Hover delay (floatingPluginOptions.hover.delay, default 250 ms) -- prevents accidental activation during normal mouse movement. Adjust as needed.
• Animation (animationTransitionDuration, default 125 ms) -- fade and directional slide matching the Tooltip's placement.
• Disabled state (isDisabled) -- prevents the Tooltip from appearing on hover or focus.
• Controlled open state (isOpen + onOpenChange) -- use together to manage visibility externally. Use defaultIsOpen for an initially open uncontrolled Tooltip.
• Tooltip groups (TooltipGroup) -- wrap adjacent Tooltips so that once one opens, others open immediately without the hover delay. Accepts delay and timeoutMs props.

Content

• Limit content to a short phrase or single sentence. Use Popover for anything longer.
• Write Tooltip text in sentence case.
• For icon-only buttons, describe the action the button performs -- not the icon name or a generic label.

Implementation Notes

• Pass Tooltip text via the content prop (string). Do not use children for Tooltip body text -- children define the trigger element.
• Custom trigger mode (isCustom) -- renders no default trigger wrapper. Children receive a render callback with floatingContext, reference, floating, and arrow objects for manual wiring.
• When isDisabled is true, the trigger renders as a span instead of button.
• The component is polymorphic via as (defaults to button, or span when disabled).
• unsafe_tooltipClassName and unsafe_tooltipStyle apply overrides to the floating overlay element, not the trigger. Use as a last resort.
• middlewareOptions customizes Floating UI middleware (offset, flip, shift, arrow, hide). additionalMiddleware appends extra middleware after the defaults.
• strategy controls CSS positioning of the floating element (default "absolute").
• Ember invocation: <PlumaTooltip @content="Label text">Trigger</PlumaTooltip>. Custom mode yields the floating UI context: <PlumaTooltip @isCustom={{true}} as |floatingUi|>.
• TooltipGroup in Ember: <PlumaTooltipGroup>. Accepts @delay and @timeoutMs.
• Global defaults for animationTransitionDuration and floatingPluginOptions can be set via PlumaProvider's componentConfig.PlumaTooltip.