Tooltip

The tooltip is a dynamic info panel that follows the mouse and displays contextual data for any UI element that has hover metadata.

It supports:

• Title, description, and key-value fields

• Rarity styling

• Future keypress-based action hints

• Full integration using on_hover blocks

---

Structure

Tooltips are defined on any UI element via the on_hover table:

{
    title = "Card Info",
    description = {
        "Info descriptions can support arrays",
        "- like so",
        "- you get the idea"
    },
    values = {
        { key = "Key", value = "Value Pairs" },
        { key = "Name", value = "Case" }
    },
    actions = {
        { 
            id = "test_action", 
            key = "E", 
            label = "Action on Keypress", 
            on_action = function(data) ... end
        }
    },
    rarity = "common"
}

Attach this block using on_hover key in UI config.

---

Rarity Themes

Tooltip headers adapt colours based on rarity. This uses var(--rarity_x) theming for visual identity.

Value	Style CSS Variable
uncommon	--rarity_uncommon
common	--rarity_common
rare	--rarity_rare
epic	--rarity_epic
legendary	--rarity_legendary

--rarity_common: rgba(255, 255, 255, 0.8);
--rarity_uncommon: rgba(38, 189, 38, 0.8);
--rarity_rare: rgba(66, 135, 245,  0.8);
--rarity_epic: rgba(119, 45, 189,  0.8);
--rarity_legendary: rgba(219, 144, 57,  0.8);

---

Tooltip Sections

Each tooltip supports 4 sections:

Section	Description
title	The main tooltip title with optional rarity label.
description	Array of text lines shown as a paragraph block.
values	Key-value display for stats, attributes, etc.
actions	Shows a list of interactive keypresses.