> For the complete documentation index, see [llms.txt](https://options-docs-v2.avisplus.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://options-docs-v2.avisplus.io/storefront-display/edit-tooltip.md).

# Customize tooltip

***

### 1. Tooltip

Tooltips display a small **pop-up message** when customers **hover over the ❓ icon** next to an option. This is ideal for **brief, contextual explanations**.

#### How to Add a Tooltip

On the **Options** tab, when creating or editing an option, click on **Advanced Setting** to view and edit the tooltip.

<figure><img src="/files/v7QU7tZRi2Zx9jDi7lrE" alt=""><figcaption></figcaption></figure>

### **2. Help Text**

Help Text appears **beneath the option input** and is **always visible**. It’s ideal for **detailed instructions or explanations** to assist customers during selection.

On the **Options** tab, when creating or editing an option, click on **Advanced Setting** to view and edit the Help text.

<figure><img src="/files/6S4GewBUCNPTMW9w7F00" alt=""><figcaption></figcaption></figure>

### 3. Adding a Link to Help Text or Tooltip

You can insert HTML anchor (`<a>`) tags to make a portion of the text clickable. This is the code to add a link to Tooltip or help text, you can enter this code to either box for the display

#### Open link in the same tab

```html
<a href="https://www.shopify.com/">Visit Shopify</a>
```

#### Open link in a new tab

```html
<a href="https://www.shopify.com/" target="_blank">Visit Shopify</a>
```

<figure><img src="/files/ijrtGgKhcKvuI183NxNP" alt=""><figcaption></figcaption></figure>

> **Note:**
>
> * `target="_blank"` ensures the link opens in a new tab.
> * Always test links to ensure they are functional and accurate.

### 4. Adding an image to Help Text or Tooltip

You can embed an image in the Help Text or Tooltip using the `<img>` tag.

<figure><img src="/files/TJH1EngXptXBNDt83prA" alt=""><figcaption></figcaption></figure>

#### Format:

```html
<img src="IMAGE_URL" alt="DESCRIPTION" style="width: 100%; height: auto;">
```

#### Example:

```html
<img src="https://avis-demo.avisplus.io/cdn/shop/products/JunctionParkaBlackLabel.jpg?v=1707193221&width=600" 
alt="Girl in a jacket" style="width: 100%; height: auto;">
```

**Instructions:**

* Replace `IMAGE_URL` with your actual image URL.
* Replace `"DESCRIPTION"` with a meaningful description (used for accessibility).
* Use `style="width: 100%; height: auto;"` to ensure the image scales properly.