# Customize Hovercard

## Basic Description Customization

Create a new class and inherit from either `HovercardUGUI` or `SkillHovercardUGUI`. Below is a basic example of adding data to the hovercard description.

```csharp
using Esper.SkillWeb.UI.UGUI;

public class MyHovercard : SkillHovercardUGUI
{
    public override bool Open(SkillNodeUGUI target)
    {
        // Get the result from the base method (simply a check to see if the hovercard was successfully opened)
        var result = base.Open(target);

        if (result)
        {
            // Get data from a custom dataset
            var dataset = target.skillNode.skill.dataset as MyDataset;

            // Extend the description
            descriptionLabel.text += $"\n\nAttack: {dataset.attack}";
        }

        return result;
    }
}
```

To learn more about datasets, see [datasets](https://stylishesper.gitbook.io/skill-web/general/datasets "mention").

## Resizing

Changing the width of the `SkillHovercardUGUI` component is simple—just set it from the inspector. However, the height is a different story. The height is calculated at runtime based on the content displayed. This is done by overriding the `Open` and `CalculateSize` methods and adding up the heights of all the relevant objects.

For reference, here's how the height is calculated for the `SkillHovercardUGUI` component:

```csharp
public override void Open(RectTransform target)
{
    // Update the size of the description label, as it's the only label with a dynamic height
    descriptionLabel.rectTransform.sizeDelta = new Vector2(descriptionLabel.rectTransform.sizeDelta.x, descriptionLabel.preferredHeight);

    // Call base open method
    base.Open(target);
}

protected override Vector2 CalculateSize()
{
    // Get the base size
    var size = base.CalculateSize();

    // Add the size of the labels through the layout (+ some extra bottom spacing)
    size.y += labelLayout.preferredHeight + 4;

    return size;
}
```

### Customize Height

To add the height of your own custom content, create a new class, inherit from `SkillHovercardUGUI`, and override the `Open`, `CalculateSize`, and `Resize` methods.

#### Example

{% hint style="info" %}
**R**emember to replace your the existing `SkillHovercardUGUI` component with the new one you create. You will have to set the properties from the inspector.
{% endhint %}

In this example, we create a custom hovercard script that simply adds a footer section. Since we're not adding extra labels with a dynamic height, we only need to override the `CalculateSize` method.

```csharp
using Esper.SkillWeb.UI.UGUI;
using UnityEngine;

public class MyHovercard : SkillHovercardUGUI
{
    /// <summary>
    /// A custom footer placed at the bottom of the hovercard.
    /// </summary>
    [SerializeField]
    private RectTransform footer;

    protected override Vector2 CalculateSize()
    {
        // Get the base size
        var size = base.CalculateSize();

        // Add the size of the footer
        size.y += footer.sizeDelta.y;

        return size;
    }
}
```

That's all! Now the hovercard will always include the size of the footer when it resizes itself.
