# Tooltip

<figure><img src="https://3046942752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHfd391cB6wDC8S3yHcie%2Fuploads%2FRBkcg7bzOdMHaOmQYthF%2Fimage.png?alt=media&#x26;token=10cc020e-99c3-4f19-b68c-e4f686de7f09" alt=""><figcaption></figcaption></figure>

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:

```lua
{
    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` |

```css
--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.            |