Luna UI Documentation

Tooltip

The tooltip is designed to handle a wide range of scenarios.

Features

Smooth size and position updates with configurable fade settings
Smart auto-positioning that prevents tooltips from going off-screen
Display multiple columns simultaneously, perfect for comparing items in inventory with equipped gear
Support for nested tooltips with customizable locking behavior
Object pooling for optimal performance with many tooltips

Attributes

Tooltip Inspector

Attribute	Description
Fade Duration	Duration of fade animation.
Fade Easing Mode	Easing mode of fade animation.

Class Controls

Position

Apply these USS classes to the VisualElements that will display a tooltip when hovered over or focused to adjust the tooltip's position. Default value is top.

Class	Description
tooltip-left	Position tooltip to the left of the VisualElement.
tooltip-right	Position tooltip to the right of the VisualElement.
tooltip-bottom	Position tooltip to the bottom of the VisualElement.

Follow Mouse

Class	Description
tooltip-follow	The tooltip will position itself relative to the mouse instead of the VisualElement and will move along with the mouse. Position class controls still apply.

TooltipController

TooltipController is a MonoBehaviour that keeps track of Tooltip element.

TooltipManipulator

Tooltip Compare

Add the TooltipManipulator to the VisualElements you want to display a tooltip for when they are hovered over or focused.

csharp

// Create manipulator with multiple columns, as demonstrated in the item comparison tooltip example above.
public TooltipManipulator(GameObject parent, TooltipController tooltipController, List<TooltipContainerSetup> setups);

// Create manipulator with one column
var manipulator = public TooltipManipulator(GameObject parent, TooltipController tooltipController);
manipulator.SetSetup(setup);

// myElement will show tooltip on hover
myElement.AddManipulator(manipulator);

This will display the tooltip we created when myElement is hovered over or focused. As you can see, the Tooltip itself is very simple.

Constructor

Name	Type	Description
parent	GameObject	The tooltip will automatically close when this GameObject is disabled.
tooltipController	TooltipController	Reference to the tooltip controller.
setup	TooltipContainerSetup	Container setup for a column. See below for details.

TooltipContainerSetup

csharp

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

Name	Type	Description
image	VisualElement	VisualElement to place in the image slot.
title	VisualElement	VisualElement to place in the title slot.
body	VisualElement	VisualElement to place in the body slot.
bottom	VisualElement	VisualElement to place in the bottom slot. Use this slot if you don't want any prior layout.
colorBackground	UIColor	Change tooltip container's background color.
colorBorder	UIColor	Change tooltip container's border color.
maxWidth	int	Change tooltip container's max with in pixels.

Example

csharp

// Reference to the TooltipController
[SerializeField] private TooltipController _tooltipController;

// VisualElement that will display tooltip on hover
VisualElement tooltipOnHover = _uiDocument.rootVisualElement.Q<VisualElement>("TooltipOnHover");

// Create elements that will display in the tooltip
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 Desctiption");
VisualElement bottom = null;

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

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

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

// Add Manipulator, you can add same manipulator to multiple elements if needed
tooltipOnHover.AddManipulator(manipulator);

Tooltip

Features

Attributes

Tooltip Guide

Class Controls

Position

Follow Mouse

TooltipController

TooltipManipulator

Constructor

TooltipContainerSetup

Example