Tutorials · Interfaces · Chapter 8

Tooltips

A tooltip

1. Select key_counter, click Add component and choose TooltipComponent. Set Text to Opens the locked door, by walking into it., Delay to 0.8 and Placement to Right.
2. Do the same for coin_counter, with Text set to Coins you have found., and for gem_counter, with Text set to Gems you have found.. Both take Delay 0.8 and Placement Right.
3. Select health_bar, add a TooltipComponent, and set Text to Health: spikes take it, potions give it back. and Delay to 0.8. Its Placement stays Below, as it comes.

Text

A Tooltip’s Text: what it says. Empty, it opens nothing at all, however long the pointer rests, which the slots below depend on. Its words stay on one line, as a tooltip’s do unless its canvas’s style gives it a Max Width, which chapter 16 does.

Delay

How long the pointer must hold still on the node before the tooltip opens, in seconds, from 0 to 5. A short wait suits something the player reaches for, a slot, 0.3. A longer one suits words that only explain, a counter or the bar, 0.8: a pointer passing over them opens nothing.

Placement

Which side of the node the tooltip opens on, centred on it and a few units off: Above, Below, Left or Right. Below is the default. A side with no room is no problem: the tooltip opens on the opposite side instead, and one that is still too wide slides along the window’s edge to stay inside it. The counters take Right, the hotbar’s slots Above, since they sit at the bottom of the window, and the bag’s slots Left, since the bag sits at its right.

1. In the Hierarchy, select hotbar_1, then Ctrl-click hotbar_2, hotbar_3 and hotbar_4. Click Add component and choose TooltipComponent. Clear Text, which starts as Tooltip, set Delay to 0.3 and Placement to Above. What you set now is set on all four.
2. Select bag_1, then Ctrl-click bag_2 to bag_16, add a TooltipComponent, clear its Text, and set Delay to 0.3 and Placement to Left.
3. In Assets, press Create, choose New script, type slot_tooltip, and press Enter.
4. In the Code tab, replace everything in slot_tooltip.rgs with the script below, and press Ctrl+S.

/// The tooltip on a slot of the hotbar or the bag: it names the item the slot
/// holds, and says nothing while the slot is empty. It writes the words into
/// the slot's own Tooltip component, which shows them once the pointer has
/// rested on the slot for its delay.
component SlotTooltip {
    /// The slot it speaks for, which is kept by that name: hotbar_1 to
    /// hotbar_4, or bag_1 to bag_16.
    slot: String = "hotbar_1",

    fn loop() {
        // The satchel and the slots keep what each slot holds: 1 a potion, 2
        // the elixir, 3 a key, 0 nothing.
        let item = kept_number(slot, 0.0);
        // An empty slot has no words, and a Tooltip with no words is never
        // shown, however long the pointer rests.
        let words = "";
        if item == 1.0 {
            words = "Potion: restores 3 health.";
        } else if item == 2.0 {
            words = "Elixir: you walk faster for 5 seconds.";
        } else if item == 3.0 {
            words = "Key: opens the locked door.";
        }
        set_text("TooltipComponent", "text", words);
    }
}

1. Select the four hotbar slots again, click Add component and choose SlotTooltip. Then select the sixteen bag slots and add it to them too.
2. The script’s Slot starts as hotbar_1. Select each slot in turn and set it to the slot’s own name: hotbar_2, hotbar_3 and hotbar_4 on the rest of the hotbar, and bag_1 to bag_16 on the bag.

In the HUD’s style

1. Select hud, click Add component and choose TooltipStyleComponent.
2. Set Texture to panel_brown.png, Border to 8, Scale to 0.625 and Padding to 14, 8.
3. Click the swatch of Edge and set its alpha to 0. Its colour, 54, 67, 63, stays as it comes.
4. Press Apply theme, at the foot of hud’s Theme. It writes Panel, white, and Ink, the palette’s cream, from the Theme, as it did for the controls in chapter 4.

Texture

A Tooltip Style’s Texture: the picture the box is drawn with, stretched to its words. Empty, the box is flat, a plain block of its Panel colour. panel_brown.png is the plate the HUD itself wears.

Border

How many pixels in from each edge of the picture are its frame, in the picture’s own pixels, as a Panel’s Border is: 8 keeps the plate’s corners their size whatever the words make the box. 0 stretches the whole picture.

Panel

The box’s colour, or the tint on its picture. White, 255, 255, 255, alpha 255, draws the plate as it is. Apply theme writes it from the Theme’s Panel, and always opaque: a tooltip opens over the game.

Edge

The colour of a thin frame just outside the box. Fully see-through, alpha 0, draws none, and the plate has a frame of its own, so none is wanted. The colour behind the alpha is the style’s default. Apply theme paints a frame only while the style draws one.

Ink

The colour of the words: the palette’s cream, 236, 227, 206, alpha 255. Apply theme writes it from the Theme’s Text.

Scale

How big the words are, as a Text’s Scale is, a share of the face’s 32 pixels: 0.625 is 20. They are drawn at the canvas’s own scale, so a tooltip grows with the interface.

Padding

The room between the words and the box’s edge, across and down, in UI units: 14 and 8, so the words sit clear of the plate’s frame.

The tooltips and the tooltip style

Check it works