Skip to main content

Overlay

The Overlay component allows you to show additional content when the user clicks on a particular element in the UI. The Overlay is placed at the border of its trigger element. To define a UI element as a trigger, use the useOverlayWithTrigger hook. The Overlay only exists in a controlled manner, so the isOpen prop must be updated by the developer.

Changes to Overlay. The full components changelog also lists package-wide and cross-cutting entries.

3.10.0

Updates

Overlays

  • Overlay and tooltip positioning now works correctly with React 19 by replacing the unmaintained react-popper dependency with a vendored, React 19-compatible version of the same hook. All existing modifier-based APIs are preserved unchanged.

3.1.0

Updates

General

  • All components in content, editors, notifications, tables and typography now expose className, style, data-testid, data-dtrum-mask and data-dtrum-allow. Additionally, all remaining props are forwarded to the root of the component. (APPDEV-16251)
  • Behavior tracking attributes are now supported in all components in content, tables, editors, notifications, and typography, as well as in the Overlay and Tooltip component. (APPDEV-16246)
  • Fixed empty aria-labelledby attribute being rendered when no label is provided, which violated accessibility guidelines. (APPDEV-16714)
Still have questions?
Find answers in the Dynatrace Community