Luna UI Documentation

Tooltip + TooltipController + TooltipManipulator together drive a smart hover/focus tooltip system: smooth size/position tweens, off-screen prevention, multi-column comparisons, nested tooltips, and pooling.

Tooltip

Features

Smooth size/position updates with configurable fade settings
Auto-positioning that prevents tooltips from going off-screen
Multi-column layouts — perfect for inventory-vs-equipped comparisons
Nested tooltips with customizable locking behavior
Object pooling for performance with many tooltips
Disabled state to programmatically gate tooltip opening

Setup

Place a single TooltipController MonoBehaviour in the scene; it owns the on-screen Tooltip element.
For each element that should show a tooltip, add a TooltipManipulator with one or more TooltipContainerSetups.

csharp

[SerializeField] private TooltipController _tooltipController;

VisualElement target = root.Q<VisualElement>("TooltipOnHover");

var setup = new TooltipContainerSetup(
    image, title, body, bottom: null,
    colorBackground: new UIColor(UIColorName.SLATE, UIColorValue.V_800),
    colorBorder: new UIColor(UIColorName.SLATE, UIColorValue.V_200)
);

var manipulator = new TooltipManipulator(gameObject, _tooltipController);
manipulator.SetSetup(setup);
target.AddManipulator(manipulator);

You can re-use a single TooltipManipulator across multiple elements.

Inspector (UxmlAttributes)

The Tooltip element exposes fade settings:

Tooltip Inspector

Attribute	Description
`FadeDuration`	Duration of the fade-in/out animation.
`FadeEasingMode`	Easing curve for the fade.

CSS classes

Add these to the target element (the one that should display a tooltip), not to the tooltip itself.

Position

Default position is top.

Class	Effect
`tooltip-left`	Position the tooltip to the left of the target.
`tooltip-right`	Position the tooltip to the right of the target.
`tooltip-bottom`	Position the tooltip below the target.

Follow mouse

Class	Effect
`tooltip-follow`	Position the tooltip relative to the cursor and follow it. Position classes still apply.

API

TooltipController

A MonoBehaviour that owns the Tooltip element.

csharp

TooltipController.Tooltip.SetTooltipEnabled(false);   // mute all tooltips
TooltipController.Tooltip.SetTooltipEnabled(true);    // resume

Useful during drag operations, cutscenes, or when another UI element should have focus.

TooltipManipulator

Tooltip Compare

csharp

// Multi-column variant (item-vs-equipped comparison)
public TooltipManipulator(GameObject parent, TooltipController controller, List<TooltipContainerSetup> setups);

// Single-column variant
public TooltipManipulator(GameObject parent, TooltipController controller);
manipulator.SetSetup(setup);

Parameter	Type	Description
`parent`	`GameObject`	Tooltip auto-closes when this object is disabled.
`controller`	`TooltipController`	Reference to the scene's controller.
`setup(s)`	`TooltipContainerSetup`	Per-column container setup.

TooltipContainerSetup

csharp

public TooltipContainerSetup(
    VisualElement image,
    VisualElement title,
    VisualElement body,
    VisualElement bottom,
    UIColor colorBackground = null,
    UIColor colorBorder = null,
    int maxWidth = 512
)

Parameter	Type	Description
`image`	`VisualElement`	Image slot (e.g. item icon).
`title`	`VisualElement`	Title slot.
`body`	`VisualElement`	Body slot.
`bottom`	`VisualElement`	Free-form bottom slot — use this when you don't want the prior row layout.
`colorBackground`	`UIColor`	Container background tint.
`colorBorder`	`UIColor`	Container border tint.
`maxWidth`	`int`	Max container width in pixels (default `512`).

Example

csharp

[SerializeField] private TooltipController _tooltipController;

VisualElement tooltipOnHover = _uiDocument.rootVisualElement.Q<VisualElement>("TooltipOnHover");

VisualElement image = new VisualElement();
image.AddToClassList("size-40");
image.style.backgroundImage = new StyleBackground(mySprite);
Label title = new Label("My Tooltip Title");
Label body = new Label("My Tooltip Description");
VisualElement bottom = null;

UIColor bgColor = new UIColor(UIColorName.SLATE, UIColorValue.V_800);
UIColor borderColor = new UIColor(UIColorName.SLATE, UIColorValue.V_200);

var containerSetup = new TooltipContainerSetup(image, title, body, bottom, bgColor, borderColor);

TooltipManipulator manipulator = new TooltipManipulator(gameObject, _tooltipController);
manipulator.SetSetup(containerSetup);

tooltipOnHover.AddManipulator(manipulator);

Tooltip

Features

Setup

Inspector (UxmlAttributes)

CSS classes

Position

Follow mouse

API

TooltipController

TooltipManipulator

TooltipContainerSetup

Example

See also