Class Tooltip

A small popup that displays contextual information when hovering over a target element.

Inheritance
object
Popup
Popup<Tooltip>
AnchorPopup<Tooltip>
Tooltip
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
public sealed class Tooltip : AnchorPopup<Tooltip>
Remarks

A tooltip is a small popup that appears when hovering over or focusing on a UI element, providing additional context, descriptions, or helpful information without cluttering the interface.

Tooltips are perfect for explaining the purpose of buttons, providing definitions for technical terms, or offering additional details about interface elements. They appear on demand and automatically dismiss when the user moves away.

The tooltip component automatically positions itself relative to the target element and includes a small arrow pointing to the source. It supports both text content and custom visual elements for more complex information displays.

Use tooltips for supplementary information that enhances understanding but isn't essential for basic functionality. Avoid putting critical information in tooltips as they may not be discoverable on touch interfaces.

Anatomy

Tooltip Examples: a button with a tooltip on hover.

<appui:Button title="Hover me" size="M" />
<appui:Tooltip text="This is a simple tooltip" anchor="Top" />

Different Positions:

<appui:IconButton icon="info" size="M" />
<appui:Tooltip text="Tooltip above" anchor="Top" />

<appui:IconButton icon="help" size="M" />
<appui:Tooltip text="Tooltip below" anchor="Bottom" />

<appui:IconButton icon="settings" size="M" />
<appui:Tooltip text="Tooltip on left" anchor="Left" />

<appui:IconButton icon="edit" size="M" />
<appui:Tooltip text="Tooltip on right" anchor="Right" />

Rich Content: a tooltip with rich content.

<appui:TextField placeholder-text="Username" size="M" />
<appui:Tooltip>
    <appui:Text text="Username Requirements:" size="S" />
    <appui:Text text="• 3-20 characters" size="XS" />
    <appui:Text text="• Letters and numbers only" size="XS" />
</appui:Tooltip>
Examples

Basic text tooltip. Adding simple text tooltips to UI elements.

var saveButton = new Button { title = "Save", leadingIcon = "save" };

var tooltip = Tooltip.Build(saveButton)
.SetText("Save your changes to the current document")
.SetPlacement(PopoverPlacement.Top);


// Tooltip will automatically show on hover
// and hide when the user moves away


toolbar.Add(saveButton);


// For icon-only buttons, tooltips are especially helpful
var settingsButton = new IconButton ;
var settingsTooltip = Tooltip.Build(settingsButton)
.SetText("Open application settings");


toolbar.Add(settingsButton);

Custom content tooltip. Creating tooltips with rich visual content.

var profileButton = new Button { title = "User Profile" };

// Create custom tooltip content
var tooltipContent = new VisualElement();
tooltipContent.AddToClassList("profile-tooltip");


var avatar = new Avatar { src = "user-avatar.png", size = Size.S };
var userName = new Text("John Doe") ;
var userRole = new Text("Administrator") ;
userRole.AddToClassList("text-muted");


var info = new VisualElement();
info.Add(userName);
info.Add(userRole);


var container = new VisualElement  };
container.Add(avatar);
container.Add(info);
tooltipContent.Add(container);


var profileTooltip = Tooltip.Build(profileButton)
.SetContent(tooltipContent)
.SetPlacement(PopoverPlacement.BottomStart);


header.Add(profileButton);

Tooltip positioning and configuration. Different placement options and tooltip behavior.

// Top placement for bottom toolbar buttons
var bottomButton = new IconButton { icon = "add" };
var topTooltip = Tooltip.Build(bottomButton)
    .SetText("Add new item")
    .SetPlacement(PopoverPlacement.Top);

// Left placement for right-side buttons
var rightButton = new IconButton ;
var leftTooltip = Tooltip.Build(rightButton)
.SetText("Get help and documentation")
.SetPlacement(PopoverPlacement.Left);


// Tooltip with keyboard dismissal enabled
var complexButton = new Button ;
var complexTooltip = Tooltip.Build(complexButton)
.SetText("Access advanced configuration options\nPress ESC to close this tooltip")
.SetPlacement(PopoverPlacement.Right)
.SetKeyboardDismissEnabled(true);


// Programmatically show/hide tooltips
complexButton.clicked += () => {
if (complexTooltip.isShown)
complexTooltip.Dismiss();
else
complexTooltip.Show();
};

Fields

defaultPlacement

The default placement of the tooltip.

Declaration
public const PopoverPlacement defaultPlacement = Bottom
Field Value
Type Description
PopoverPlacement

Properties

content

The content Visual Element of the tooltip (if any).

Declaration
public VisualElement content { get; }
Property Value
Type Description
VisualElement

template

The template to display inside the popup.

Declaration
public VisualElement template { get; }
Property Value
Type Description
VisualElement

text

The text to display inside the popup.

Declaration
public string text { get; }
Property Value
Type Description
string

Methods

AnimateViewOut(DismissType)

Start the hide animation for this popup.

Declaration
protected override void AnimateViewOut(DismissType reason)
Parameters
Type Name Description
DismissType reason

The reason for the dismissal.
Overrides

Build(VisualElement)

Build a new Tooltip.

Declaration
public static Tooltip Build(VisualElement referenceView)
Parameters
Type Name Description
VisualElement referenceView

An arbitrary UI element used as reference for the application context to attach to the popup.
Returns
Type Description
Tooltip

A Tooltip instance.
Remarks

In the Application element, only one Tooltip is create and moved at the right place when hovering others UI elements. The Tooltip is handled by the TooltipManipulator.

Exceptions
Type Condition
ArgumentNullException

If referenceView is null.

FindSuitableParent(VisualElement)

Find the parent VisualElement where the popup will be added.

Declaration
protected override VisualElement FindSuitableParent(VisualElement element)
Parameters
Type Name Description
VisualElement element

An arbitrary UI element inside the panel.
Returns
Type Description
VisualElement

The popup container VisualElement in the current panel.
Overrides
Remarks

This is usually one of the layers from the Panel root UI element. If no Panel is found, the method will return the visual tree root of the given element.

SetContent(VisualElement)

Set the content of the tooltip.

Declaration
public Tooltip SetContent(VisualElement content)
Parameters
Type Name Description
VisualElement content

The content to display inside the tooltip.
Returns
Type Description
Tooltip

The Tooltip.
Remarks

Passing null will clear the content of the tooltip.

SetText(string)

Set a new value for the text property.

Declaration
public Tooltip SetText(string value)
Parameters
Type Name Description
string value

The new value (will be localized).
Returns
Type Description
Tooltip

The Tooltip.

ShouldAnimate()

Implement this method to know if the popup should call AnimateViewIn() and AnimateViewOut(DismissType) methods or not.

Declaration
protected override bool ShouldAnimate()
Returns
Type Description
bool

True if you want to animate the popup, False otherwise.
Overrides