CalmUI
Unreal Engine

Show an Overlay or Tooltip

Place information above your main screen without blocking gameplay.

Local modal showcase

GameUI's ModalShowcase demonstrates fullscreen, blurred-background and confirm dialogs without gameplay actions. A visible aria-modal="true" element limits pointer and focus eligibility to its descendants. Removing it restores the previous focus; keep it mounted throughout an exit animation. @back receives Escape/controller Back through the focused element. Local component timers can remove the dialog after the CSS animation and refresh both host views.

Use content-driven card heights, viewport-relative widths and shared typography tokens. backdrop-filter: blur(12px) blurs only earlier scene/UI content, not the dialog's own controls. See effects.

Content-sized tooltips

Focus-driven tooltips remain available through keyboard/controller navigation. Clicking non-focusable background clears control focus; in Studio, clicking the canvas background does not select the first control. Hover independently keeps a tooltip visible while the pointer remains over its trigger.

Keep tooltip height automatic so translated descriptions can wrap. Constrain the popup width relative to the viewport and use a maximum width for readability; the content card can fill that width. A top-placed popup can use bottom: 100% with a shared bottom margin, so short and long descriptions keep the same gap from their trigger. Test both edges of the trigger, not only its center.

  1. Select the View in Studio and choose layer overlay or tooltip.
  2. Use input passthrough to leave keyboard/gamepad focus with the existing View. Use pointer-events: none for purely informational content. An explicitly interactive child can use pointer-events: auto for a close or action button.
  3. Save and wait for the package to update in Unreal.
  4. Call Open CalmUI Screen with the Player Controller, package, and Screen.
  5. From Completed, save Screen Reference for closing it later.
  6. Call Close CalmUI Screen with that reference when the information should disappear.

Use Open CalmUI Screen here: it follows the layer chosen in Studio. The Push node explicitly puts a View on the Screen layer.

CalmUI draws World, HUD, Screen, Overlay, Modal, then Tooltip. World-anchored UI (name plates, health bars, badges over actors) always draws beneath every HUD panel. An overlay appears above the main screen, while a tooltip appears above every other layer.

Mounted overlay Views receive Store updates and animate their own content. Their pointer controls use the same transformed hit testing as the main View; empty passthrough areas do not cover controls below. A modal's input barrier still blocks interaction with background content.

Inline hints versus world anchors

A source-authored focusable wrapper can reveal a non-interactive child card using :hover, :focus and :gamepad-focus, with CSS transitions. Its content can be a reusable component taking localized text props. This is an inline hint: it still obeys ancestor clipping and does not automatically reposition at the viewport edge. Do not put another focusable control inside a wrapper intended to be the focus target.

The Tooltip layer does not automatically attach a View to an Actor. A general world-anchor manager with camera projection, edge placement and occlusion is not currently implemented. World surfaces render Views into host-provided textures for meshes; they are a different mechanism.

On this page