Menu
Lumberyard
User Guide (Version 1.14)

Tooltip Components

You can add either a Tooltip component or a TooltipDisplay component to an element. With these components, you can display a tooltip when hovering over an interactive element.

To see in-game examples of completed canvases with Tooltip components, open the level UiFeatures in the project SamplesProject. Press Ctrl+G to play the game, and then choose Components, Other Components, Tooltips. You can view examples of tooltip text options and display styles. Press Esc to exit the game.

To view these same canvases in the UI Editor, navigate to the \Gems\LyShineExamples\Assets\UI\Canvases\LyShineExamples\Comp\Tooltips directory.

You can open the following canvases:

  • TextOptions.uicanvas

  • Tooltips.uicanvas

Tooltip

You can use a Tooltip component to provide the text of the tooltip. Add a tooltip component to any interactive element that is to display a tooltip in the pause state.

To edit a tooltip component

  1. In the Properties pane of the UI Editor, expand Tooltip.

  2. Type a text string.

TooltipDisplay

The TooltipDisplay component defines the tooltip's display behavior. Add a TooltipDisplay component to the element that is to visually represent the tooltip. You must also set the Tooltip display element property of the canvas to this element. For more information, see Configuring Canvas Properties.

To edit a TooltipDisplay component

  • In the Properties pane of the UI Editor, expand TooltipDisplay and use the following settings, as appropriate:

    Auto position

    Automatically positions the element based on the positioning mode. The positioning mode is specified in the Positioning property.

    Positioning

    Select a positioning mode:

    • Offset from mouse – Position the element so that its pivot is a certain distance from the pointer. The distance is specified in the Offset property.

    • Offset from element – Position the element so that its pivot is a certain distance from the pivot of the element that triggered the tooltip display.

    Offset

    The offset to use when automatically positioning the element.

    Auto size

    Automatically resizes the element to match the tooltip string's size. The text element is a child of the element, and its text is specified in the Text property. If Auto size is selected, then the text element’s anchors should be apart so that the text element can grow and shrink with its parent.

    Text

    The child element that is to display a tooltip string.

    Delay time

    The amount of time to wait before displaying the element.

    Display time

    The amount of time the element is to be displayed.

    Show sequence

    The animation sequence to be played when the element is about to appear.

    Hide sequence

    The animation sequence to be played when the element is about to disappear.

On this page: