# How to make tool tips

SuperTables allows you to create custom tooltips that can be shown when you hover over a row or a specific column. To create a tooltip follow this guide.

#### Step 1: Open Configuration 

{% tabs %}
{% tab title="Dashboard extension" %}
Click on the container that has SuperTables running. This will display an arrow that you can click to open a menu. Upon opening the menu, click the 'Configure...' option to open the configuration panel for SuperTables.

<figure><img src="/files/5Av1IhcpSaex5vwah2hM" alt=""><figcaption><p>Opening configuration panel in Dashboard </p></figcaption></figure>
{% endtab %}

{% tab title="Viz extension" %}
To open the configuration panel, simply click 'Format extension' in the Marks pane.

<figure><img src="/files/xwZgjTFwnF4RM4iU6ghd" alt="" width="247"><figcaption><p>Opening the configuration panel in Viz extensions</p></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Step 2: Navigate to the Tooltip tab

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

#### Step 3: Click make a new tooltip

On the left side of the Tooltip tab. There is a button that says make a new tooltip. Click make a new tooltip on there.

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

#### Step 4: Make your tooltip

Choose the location of your tooltip first, for the purpose of this guide we are going to use visible on all columns(row tooltip) but you can also make the tool tip only visible on specific oclumns.

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

**Configure your tooltip**

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

Our tooltip creator uses a familiar rich text editor style for formatting the text inside of the tooltip.

**1:** Adding a column name or value to your tool tip: Type '**$**' to display the current cell's name and value in the tooltip when you hover over the cell. For example, '**$Column Name**: **$Column Value**' will display the cell's column name and value in the tooltip when you hover over the cell.<br>

**2:** Inserting a specific column: Type '**@**' followed by a column name to display the column value in the Tooltip. For instance, '**Profit Ratio: @Profit Ratio**' will replace **@Profit Ratio** with the actual value of the Profit Ratio column.

**3:** Coloring your text: You can use the right most color picker to color your text a specific color.

**4:** Inserting images: Your tooltip can also contain images. This can be done by clcikign the image icon.

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

## Additional Options

On the main screen there are general options for tooltips that apply to all of the tooltips. These options determine the appearance and style of the tooltip.

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

**Let tooltip follow mouse**: Clicking on the makes the tooltip follow the mouse instead of appear and remaing stationary.

**Make tooltip interactive:** Selecting this option allows the user to copy text inside of the tooltip.

**Padding**: Determines padding of the tooltip.

**Font Size**: Font size of all the text inside of the tooltip by default 12px. You can also change the font text size of each separately by highlighting the text and then using the font size dropdown menu to change the font size value.

**Font weight**: Determines the boldness of the text inside the tootip by default something.

**Background Color**: Determines the background color of the tooltip, by default white.

**Font Color**: Determines the Font color of the tooltip, by default black.

**Border Color**: Determines the Border color of the tooltip, by default grey.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.infotopics.com/supertables/guides/how-to-make-tool-tips.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.