> For the complete documentation index, see [llms.txt](https://knowledgebase.fabricdata.com/fabric-knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledgebase.fabricdata.com/fabric-knowledge-base/learn-the-application/destinations/reporting/creating-and-styling-custom-tooltips-with-reporting.md).

# Creating and Styling Custom Tooltips with Reporting

This summary outlines the practical application shown in the attached video, detailing how to enable, style, and save a visualization with custom tooltips:

{% file src="/files/qoFSEyoodARx22oukruK" %}

### 🎨 Creating and Styling Custom Tooltips

#### 1) Prepare the Explore Query:

* Select the required dimensions and measures from the field picker.
* Apply necessary filters (e.g., Record Status, Record Category) 
* Click Run to generate the data.

#### 2) Access Visualization Settings:

Once the data is rendered:

1. Go to the Visualization bar.
2. Click the Edit button.
3. Navigate to the Series tab within the visualization editor.

#### 3) Enable Custom Tooltips for a Specific Series:

*  Locate the specific data series you wish to enhance.
*  Find the Custom Tooltip toggle and switch it to ON.

#### 4) Customize Tooltip Appearance:

Use the UI controls to adjust the visual design:

* Colors: Use the color picker to select a Background Color and Font Colo*r* (ensure high contrast for readability).
* Layout: Adjust Text Alignment (Left, Center, Right) and Border Radius to modify the shape and position.

#### 5) Configure Advanced Content with Liquid/HTML:

Click on the Edit Tooltip Content button to open the code editor. You can input HTML and Liquid variables to display data points not present in the main chart.

{% hint style="info" %}
Note: By default, Looker automatically populates this section with code that references all fields included in the Explore query. This allows the tooltip to immediately display every data point in the report when hovering over the activated series, as shown in the demonstration video.
{% endhint %}

Click Preview within the editor to check the data structure before applying.

#### 6) Preview and Validate:

Hover your cursor over the data points in the visualization to verify that the custom tooltip displays the correct information and follows the defined style.

#### 7) Save the Visualization:

Once satisfied with the results:

1. Click the gear icon (Settings) in the top-right corner.
2. Select Save... and then As a new dashboard (or to an existing one) to preserve your custom tooltip configuration.

***

#### 📚 External Resources & Examples

For a deeper dive into limitations and advanced logic, refer to the official documentation and examples below:\
\
Link: <https://docs.cloud.google.com/looker/docs/custom-tooltips>\
\
Examples in Google:

* [Custom tooltip with multiple measure values](https://docs.cloud.google.com/looker/docs/custom-tooltips#custom-tooltip-with-multiple-measure-values)
* [Custom tooltip with hidden values structured as a table](https://docs.cloud.google.com/looker/docs/custom-tooltips#custom-tooltip-values-as-a-table)
* [Custom tooltip with common Liquid functions](https://docs.cloud.google.com/looker/docs/custom-tooltips#custom-tooltip-with-common-liquid-functions)