Skip to content

attachTooltip

attachTooltip(anchor, scene, opts): TooltipHandle

Defined in: ui/src/attachTooltip.ts:84

Imperative, headless tooltip for the non-React @yagejs/ui layer.

Anchors a floating bubble to anchor via the scene’s top-most overlay (the same surface <Tooltip> uses): it draws above all other UI, escapes any clip, flips/shifts to stay on-screen, and caps to maxWidth. World-space / camera-transformed anchors (e.g. a ScreenFollow namecard) track correctly — the overlay re-anchors every frame against anchor’s live geometry.

Activation is yours. This builds the floating parts and returns a TooltipHandle; nothing shows until you call setActive. anchor may be a root UIPanel or any UIElement (button, image, nested panel, …) and is used only for positioning — attachTooltip never wires it for hover, so it can’t clobber the anchor’s handlers. Drive it yourself; setting onHover replaces that single slot, which is what you want when the anchor has none — if it already has one, compose them:

const tip = attachTooltip(panel, scene, { content }); // a UIPanel, or any element
panel.setPointerHandlers({ onHover: tip.setActive }); // root panel
// a child element instead? element.update({ onHover: tip.setActive })
// already has a hover handler? onHover: (h) => { existing(h); tip.setActive(h); }
// …or drive from any other source: focus, long-press, a timer, programmatic.

Requires the scene to have a FloatingOverlay (registered by UIPlugin); throws otherwise. Call dispose() to release the overlay slot. For custom popovers/menus reach for scene._resolveScoped(FloatingOverlayKey).acquire() + computePosition() directly.

UIElement | UIPanel

Scene

AttachTooltipOptions

TooltipHandle