# Inventool Hover Details

## 📜 InventoolHoverDetails Class

A mini pop-up window that displays item details on hover.

> **Namespace:** `Esper.Inventool.UI`\
> **Access:** `public`\
> **Type:** `class`\
> **Inherits:** `MonoBehaviour`

***

### 📦 Fields

| Access      | Field                        | Type                | Description                                       |
| ----------- | ---------------------------- | ------------------- | ------------------------------------------------- |
| `protected` | `document`                   | `UIDocument`        | The UI document component.                        |
| `protected` | `root`                       | `VisualElement`     | Root element of the hover details.                |
| `protected` | `topBackgroundElement`       | `VisualElement`     | Element showing the top background.               |
| `protected` | `itemBackgroundElement`      | `VisualElement`     | Element showing the item background.              |
| `protected` | `imageElement`               | `VisualElement`     | Element displaying the item image.                |
| `protected` | `itemNameLabel`              | `Label`             | Label for the item name.                          |
| `protected` | `itemTypeLabel`              | `Label`             | Label for the item type.                          |
| `protected` | `descriptionScrollView`      | `ScrollView`        | Scroll view containing the description text.      |
| `protected` | `descriptionLabel`           | `Label`             | Label for the description text.                   |
| `protected` | `statsScrollView`            | `ScrollView`        | Scroll view containing stat elements.             |
| `protected` | `weightArea`                 | `VisualElement`     | Container for the weight display.                 |
| `protected` | `weightLabel`                | `Label`             | Label showing the item weight.                    |
| `protected` | `currencyIconElement`        | `VisualElement`     | Element displaying the currency icon.             |
| `protected` | `currencyLabel`              | `Label`             | Label showing the currency amount.                |
| `protected` | `bottomArea`                 | `VisualElement`     | Container for bottom content (level, durability). |
| `protected` | `separator`                  | `VisualElement`     | Separator between content areas.                  |
| `protected` | `lvlArea`                    | `VisualElement`     | Container for level display.                      |
| `protected` | `lvlLabel`                   | `Label`             | Label showing the item level.                     |
| `protected` | `lvlProgressBar`             | `ProgressBar`       | Progress bar for level experience.                |
| `protected` | `durabilityArea`             | `VisualElement`     | Container for durability display.                 |
| `protected` | `durabilityLabel`            | `Label`             | Label showing the durability text.                |
| `protected` | `durabilityProgressBar`      | `ProgressBar`       | Progress bar for the durability value.            |
| `protected` | `loadedStatElements`         | `List<StatElement>` | List of instantiated stat elements.               |
| `public`    | `appearanceDelay`            | `float`             | Delay before details appear (seconds).            |
| `protected` | `autoScrollDelay`            | `float`             | Delay before auto-scroll starts.                  |
| `protected` | `descriptionAutoScrollSpeed` | `float`             | Speed for auto-scrolling the description.         |
| `protected` | `statsAutoScrollSpeed`       | `float`             | Speed for auto-scrolling the stats.               |
| `protected` | `autoScrollDescriptionToEnd` | `bool`              | True if description scroll is heading to end.     |
| `protected` | `autoScrollStatsToEnd`       | `bool`              | True if stats scroll is heading to end.           |
| `protected` | `openAction`                 | `Action`            | Deferred open callback when closing.              |
| `protected` | `transitionState`            | `TransitionState`   | Current transition state for opening/closing.     |

***

### 🔍 Properties

| Access          | Property        | Type                    | Description                          |
| --------------- | --------------- | ----------------------- | ------------------------------------ |
| `public`        | `TargetElement` | `VisualElement`         | The element currently being hovered. |
| `public`        | `IsOpen`        | `bool`                  | True if hover details are enabled.   |
| `public static` | `Instance`      | `InventoolHoverDetails` | Active singleton instance.           |

***

### 🧰 Methods

| Access              | Method                                     | Returns       | Description                                             |
| ------------------- | ------------------------------------------ | ------------- | ------------------------------------------------------- |
| `protected virtual` | `Awake()`                                  | `void`        | Initialize singleton and cache UI elements.             |
| `private`           | `Start()`                                  | `void`        | Set picking mode to ignore for all UI elements.         |
| `private`           | `SetPickingModeIgnoreRecursively(element)` | `void`        | Recursively set picking mode to ignore on element tree. |
| `public virtual`    | `SetElements(itemStack)`                   | `void`        | Populate UI with details from an `ItemStack`.           |
| `public virtual`    | `SetElements(item)`                        | `void`        | Populate UI with details from an `Item`.                |
| `protected`         | `OpenWithDelay()`                          | `IEnumerator` | Delay before opening by `appearanceDelay`.              |
| `protected`         | `OpenOnClose(endEvent)`                    | `void`        | Invoke deferred open after close transition.            |
| `public virtual`    | `Open(target)`                             | `void`        | Display hover details for a visual‐element target.      |
| `protected virtual` | `OpenTransitionComplete(endEvent)`         | `void`        | Finalize opening after transition ends.                 |
| `protected virtual` | `Resize()`                                 | `void`        | Resize window based on content and screen size.         |
| `protected`         | `ForceInsideView()`                        | `IEnumerator` | Ensure details stay within the viewport.                |
| `public virtual`    | `IsTargetted(element)`                     | `bool`        | Check if given element is the current hover target.     |
| `protected virtual` | `CloseTransitionComplete(endEvent)`        | `void`        | Finalize closing after transition ends.                 |
| `public virtual`    | `Close()`                                  | `void`        | Begin closing hover details with transition.            |
| `protected`         | `DescriptionAutoScrollLoopedCoroutine()`   | `IEnumerator` | Auto-scroll and loop the description view.              |
| `protected`         | `StatsAutoScrollLoopedCoroutine()`         | `IEnumerator` | Auto-scroll and loop the stats view.                    |

***

### 🧩 Nested Types

#### `protected enum TransitionState`

| Name      | Description                              |
| --------- | ---------------------------------------- |
| `Opened`  | Hover details fully open and visible.    |
| `Opening` | Hover details are in opening transition. |
| `Closed`  | Hover details fully closed and hidden.   |
| `Closing` | Hover details are in closing transition. |

***

## Active Instance

You can get the active `InventoolHoverDetails` instance with `InventoolHoverDetails.Instance`. Ensure there's an instance of it in your scene before using this field.

## Open

Opening the hover details essentially requires a `VisualElement` target. By default, Inventool has special UI elements that hold a reference to an item, which is used by the `InventoolHoverDetails` class to both open at the location of the UI element and also display the item details. So, it's not as easy as just calling an `Open` method.

```csharp
// This may only open the hover details without setting the item
InventoolHoverDetails.Instance.Open(myVisualElement);
```

## Close

```csharp
InventoolHoverDetails.Instance.Close();
```

## Customizations

If you're okay with when the `InventoolHoverDetails` is opened, but not okay with the information displayed, you can customize it.

### Step 1: Create a New Class

Create a new class that inherits from `InventoolHoverDetails`. In your scene, replace the [hover-details](https://stylishesper.gitbook.io/inventool/editors/components/ui/ui-toolkit/hover-details "mention") component with the new one you created.

```csharp
using Esper.Inventool.UI;

public class MyHoverDetails : InventoolHoverDetails
{
    
}
```

### Step 2: Override Methods

Override the four Open methods as shown below. Each one opens the hover details for a different UI item element (each UI item element has a reference to an item).

```csharp
using Esper.Inventool.UI;

public class MyHoverDetails : InventoolHoverDetails
{
    // For inventory slots
    public override void Open(ItemStackElement target)
    {
        base.Open(target);
    }
    
    // For equipment slots
    public override void Open(EquipmentSlotElement target)
    {
        base.Open(target);
    }

    // For other purposes (enchanting, crafting)
    public override void Open(ItemSlotElement target)
    {
        base.Open(target);
    }
    
    // For shop items
    public override void Open(ShopItemElement target)
    {
        base.Open(target);
    }
}
```

### Step 3: Implement Your Customizations

In the code example below, we're going to customize the description displayed when an inventory item is hovered with a custom scriptable object.

```csharp
using Esper.Inventool.UI;

public class MyHoverDetails : InventoolHoverDetails
{
    public override void Open(ItemStackElement target)
    {
        base.Open(target);

        var myCustomClass = (MyCustomClass)target.itemStack.item.customObject;
        descriptionLabel.text = myCustomClass.myCustomDescription;
    }

    public override void Open(EquipmentSlotElement target)
    {
        base.Open(target);
    }

    public override void Open(ItemSlotElement target)
    {
        base.Open(target);
    }

    public override void Open(ShopItemElement target)
    {
        base.Open(target);
    }
}
```
