Tooltip

Type: Custom Component

UI Builder Inspector

Public Properties

Name	Type	Description
Delay	long	The amount of time, in milliseconds, to wait before the tooltip appears after hovering over an element.
FadeTime	long	The speed at which the tooltip fades in and out. A lower value results in a faster fade, while a higher value makes the transition slower.
StartHidden	bool	Determines whether the tooltip starts hidden or visible. If true, the tooltip will remain hidden until triggered by user interaction.
FollowMouse	long	Specifies whether the tooltip should follow the mouse cursor. When set to true, the tooltip will move with the cursor. When set to false, the tooltip will position itself relative to the hovered element, aligning to the top, bottom, right, or left.
BackgroundColor	UIColor	Defines the background color of the tooltip.
BorderColor	UIColor	Defines the border color of the tooltip.

Tooltip Manipulator

When attached to an element, it triggers the display of a tooltip on hover or focus events.

Constructor

Name	Type	Description
tooltip	Tooltip	The tooltip to show/hide.

Example Usage

var myTooltip = new Tooltip();
myTooltip.Title = "This is a tooltip";
myTooltip.FollowMouse = true; // Tooltip will follow the mouse cursor

var myElement = new VisualElement();
myElement.AddManipulator(new TooltipManipulator(myTooltip));

Default Tooltip

The Tooltip is a basic feature on its own, so we've provided a default tooltip to cover most use cases. You can refer to the TooltipDemo scene for setup guidance.

Default Tooltip Demo Scene

Default Tooltip Manipulator

Name	Type	Description
tooltip	Tooltip	The tooltip to show/hide.
image	VisualElement	VisualElement to place inside image slot.
title	VisualElement	VisualElement to place inside title slot.
body	VisualElement	VisualElement to place inside body slot.
bottom	VisualElement	VisualElement to place inside bottom slot.
bgColor	UIColor	The background color of the tooltip.
borderColor	UIColor	The border color of the tooltip.

Example Usage

var tooltip = new Tooltip();
tooltip.Title = "Tooltip Example";

var image = new VisualElement();
image.AddToClassList("size-128"); // Add size class
image.AddToClassList("rounded-lg"); // Add rounded corner class
// Apply a background color using a UIColor instance
image.AddToClassList(new UIColor(UIColorName.SLATE, UIColorValue.V_400).GetUssClassBG());
// Add icon
image.AddToClassList("icon-arrow-left");
// Or set custom background image
Sprite Icon;
image.style.backgroundImage = new StyleBackground(Icon);

var title = new Label("Item Name");
var body = new Label("This is a detailed description of the item.");
var bottom = new Label("Additional Info");

var bgColor = new UIColor(UIColorName.SLATE, UIColorValue.V_200);
var borderColor = new UIColor(UIColorName.GRAY, UIColorValue.V_600);

var manipulator = new DefaultTooltipManipulator(tooltip, image, title, body, bottom, bgColor, borderColor);
someElement.AddManipulator(manipulator);