# Tooltip (Default & Custom)

The Tooltip property block in the component property section grants detailed control over the hover functionality for any charting component. This dedicated configuration area allows you to precisely define the content, format, and behavior of the tooltip that appears when a user hovers their mouse over a data point (like a bar, line marker, or pie slice). Within this block, you can select which data fields to display (e.g., showing both the sales value and the corresponding profit margin), customize the displayed labels, and apply specific formatting (such as currency symbols or percentage signs) to ensure the transient information is clear, relevant, and immediately digestible to the end-user. Essentially, it transforms a basic hover action into a focused, on-demand data inspection tool.

**Tooltip block includes:**\
**Show Tool Tip**, **Background Color**, **Opacity**, **Border Color**, **Box Width**, **Precision**, and **Highlighter**.

### Properties

* **Show Tool Tip** — Configures tooltip as **Default**, **Custom**, or **None**.
  * Clicking this opens a **modal** with three radio buttons (default selection is **Default**).
  * **None**: No tooltip is shown for the component.
  * **Default**: Uses the component’s built-in tooltip.
  * **Custom**: Lets you fully configure the tooltip content and style.
* **Background Color** — Sets the tooltip background color.
* **Opacity** — Sets tooltip background opacity.
* **Border Color** — Sets tooltip border color.
* **Box Width** — Select a width for the tooltip box from the dropdown.
* **Precision** — Sets numeric precision displayed in the tooltip.
* **Highlighter** — Enable to highlight the field’s background color within the tooltip.

{% hint style="info" %}
**Note:** “Font Color” changes are not supported in **Internet Explorer**.
{% endhint %}

### Custom Tool Tip (when **Show Tool Tip = Custom**)

When you select **Custom**, an **editable text box** opens.

**Editor features**

* **Property buttons** (e.g., font color/size/family) across the top.
* A **select box** listing **all fields of the dataset**.
* **Save** and **Cancel** buttons.

**Defaults & content**

* The editor auto-populates with selected dataset fields by default.
* You can add **additional fields** from the select box.

**Field insertion syntax**

* **Display the name, then the field name inside brackets**.
* The **field data replaces the brackets** at runtime.
  * Example snippet:

    ```makefile
    Customer: [customer_name]
    Revenue: [revenue]
    ```

**Styling tips**

* To change a field’s **font properties**, **select the entire bracketed token** (e.g., `[revenue]`) before applying style; otherwise, the value may not render in the tooltip.
* Adjust **font color, font size, font family**, and other properties via the property buttons.

### Embedding HTML in tooltips

Use the special **`<htmlTag></htmlTag>`** wrapper to inject raw HTML into the tooltip.

* **Images / Videos** can be displayed inside this tag.
* Use `src=` with either:
  * A **dataset field**: `src=[Field Name]`
  * A **fixed URL**: `src="https://www.bdbizviz.com/resources/images/BDB_logo.png"`

**Examples**

```html
<htmlTag><img src=[ImageURL] style="max-width:180px"/></htmlTag>

<htmlTag>
  <video src=[VideoLink] controls style="width:240px;height:auto"></video>
</htmlTag>

<htmlTag><img src="https://www.bdbizviz.com/resources/images/BDB_logo.png"/></htmlTag>
```

{% hint style="info" %}
**Note:** Ensure your field actually contains a valid URL for image/video rendering.
{% endhint %}

### Mobile Tooltip configuration

* **Available for:** **Timeline**, **Bar**, **Heatmap**, **Pie**.
* **Works only when the component is in the maximized state**.
* Enable **Default Tooltip** via script:

```js
// Enable default mobile tooltip style for a component
SSDK.getWidget('ComponentID').m_mobiletooltipstyle = "default";
```

Replace `ComponentID` with your chart’s ID.

### Workflow (quick start)

1. **Open** the component’s **Tooltip** property block.
2. Choose **Show Tool Tip** → **Default** or **Custom** (or **None**).
3. If **Custom**:
   * Compose content with bracketed fields (e.g., `[sales]`, `[region]`).
   * Apply styles via property buttons.
   * (Optional) Wrap advanced content with `<htmlTag>…</htmlTag>` for images/videos.
4. Set **Background Color**, **Opacity**, **Border Color**, **Box Width**, and **Precision** as needed.
5. (Optional) Enable **Highlighter** for emphasized field background.
6. **Preview** the chart to validate.

### Troubleshooting

* **Tooltip not visible**: Confirm **Show Tool Tip** isn’t set to **None**.
* **Styled field not rendering**: Re-select the **entire** `[field]` token before applying font properties.
* **Image/video not appearing**: Verify the `src` URL (or `[Field Name]` value) is valid and reachable.
* **Unexpected numeric formatting**: Adjust **Precision**; check the component’s number format settings as well.
* **Mobile tooltip not showing**: Ensure the component is **maximized** and the script property `m_mobiletooltipstyle` is set.


---

# 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.bdb.ai/bdb-user-documentation/platform-modules/10.0/bdb-visualization/dashboard-designer/key-configurations/tooltip-default-and-custom.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.