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.
- Select the View in Studio and choose layer
overlayortooltip. - Use input
passthroughto leave keyboard/gamepad focus with the existing View. Usepointer-events: nonefor purely informational content. An explicitly interactive child can usepointer-events: autofor a close or action button. - Save and wait for the package to update in Unreal.
- Call Open CalmUI Screen with the Player Controller, package, and Screen.
- From Completed, save Screen Reference for closing it later.
- 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.