How to Add Tooltip Annotations to Your Google Data Studio Reports

Do you want to create de-cluttered yet data-rich dashboards?

Adding tooltip annotations is a great way to add extra information to your Google Data Studio reports!

Tooltip annotations provide direction and context to viewers and make the dashboards interactive.

In this guide, we will see how to add tooltip annotations to our charts, graphs or reports in Google Data Studio.

Here’s an overview of what we’ll cover:

Let’s begin.

Why You Need Tooltip Annotations on Your Google Data Studio Dashboard

Tooltips are a user interface element that pops up when you hover over a component on the screen. They display additional information for the component, and they’re a great way to create meaningful yet decluttered data visualizations.

Tooltips can be used to display the definition or formula of a metric or show details about an actionable icon. 

Let’s say that we have a table that shows the conversion rates for website landing pages.

This information is useful if we know what it means, but it can be kind of difficult to make sense of without any context.

This is where the tooltip annotation comes in! Check out this yellow “Attention” icon: 

A yellow warning sign in the popup of a web page

When you hover over this icon, it can provide additional information about the table. 

Additional information about the metric in the popup on the web page

Another such sign that is used often is the Help sign.

Again, when you hover over it, it will pop up with some text in it.

Help popup with some information on a web page

This is known as the component. And this Tooltip/Popup component has two parts. 

First is the knob or the icon, which is visible all the time. The second part is the popup that only gets visible when we hover over the icon on the knob section.

This helps us to save space on the report page and only present the information when the viewer wants to see that information. 

Adding the Tooltip/Popup Component to Your Google Data Studio

To add tooltip annotations to your own dashboard, start by entering Edit mode in Google Data Studio.

Next, go to Community Visualizations → Explore moreBuild your own visualisation.

Since the tooltip component is not yet available publicly through Data Studio, we’ll  need a different approach.

Let’s go to Test and add your community visualisation section and enter the following Manifest path from Siavak:

gs://siavak-visualizations/popup 
Entering the Manifest path to add community visualisation in Google Data Studio

At the end, click on the Submit button.

This gives you access to Siavak’s popup component. It gives you the freedom to place the popup anywhere on your report.

Once you add your component, you will need to assign a Data source and a Metric to the component. We’ll cover more on that later in this guide!

For now, we need to edit the Data source and make sure that the Community visualizations access is set to On.

Otherwise, the component will not work and will show an error message.

Setting the Community visualisations to On in Google Data Studio

Configuring the Tooltip/Popup Component

We will take our earlier example of a table for landing page conversions. Let us say we want to define the term “landing page” for people who don’t know what it is.

Firstly, we will place it near the Landing Page heading and resize it as per our requirements.

Add the popup component near the Landing Page heading of the web page

For this, we would want to access all the settings and configurations of the tooltip component. 

So, let’s go to the Style tab.

Component Visibility Setting

The first checkbox that we see here is Always Visible.

We will always keep this checked. It makes designing easier and we can see how the components look and feel in real time as we go through the configurations.

Checking the Always Visible option under the Style tab of Google Data Studio

Chart Header Visibility

Let’s say we want to remove the menu on top of the component.

To do that, we’ll go to the Chart Header option and select Do not show.

Selecting the Do not show option for Chart Header in Google Data Studio

Bubble Content

The next option is the most crucial part of the popup component: the Bubble Content!

Bubble Content configuration in Google Data Studio

In our case, the Bubble Content is the definition of the Landing Page that we want to put.

So let’s add the definition for Bubble Content.

Definition of Landing Page in the Bubble Content of Google Data Studio

Knob Configuration

Next comes the visual part of the component, the icon that is displayed. This icon is called the Knob Content.

Question mark added as the Knob Content in Google Data Studio

A question mark seems appropriate here. But you can also put an emoticon, exclamation mark, or even add some text.

And if you think the text is too long, you can put an i for information.

The next configuration lets you decide the position of the knob.

You can place the knob on the Top Left, Top Right, Bottom Left and Bottom Right of your tooltip box.

Setting the Knob Position in Google Data Studio

The next setting is Fill. This determines how the background of your popup is filled.  You can fill the popup dynamically according to either the horizontal or vertical space filled by the text. Alternatively, you could also choose to fill the whole box or leave it entirely empty.

We can also check the Knob Overlay option to overlay the knob.

Fill setting option under the Style tab of Google Data Studio

Font Customization

Then comes the font customization of the component.

We can adjust the style, size, and family for the font, just like with the Google font components. 

Font customization under the Style tab of Google Data Studio

Color Customization

Similarly, you have full access over the colors of the component!

You can change the Text Color, Background Color, Knob Color and Knob Background Color.

Color customization under the Style tab of Google Data Studio

And finally, we can apply a border radius to the popup section just to make the corners a bit rounded. 

That’s it! We’re done with the customization of the component.

When you’ve finished customizing your tooltip popup, you can go back and uncheck the Always Visible option.

Unchecking the Always Visible setting under the Style tab of Google Data Studio

Now, only the question mark will be visible unless you hover your mouse over it. 

The component setup in the View mode of Google Data Studio

💡 Top Tip: You can stylize the bubble content text using HTML tags.

Adding a Conditional Popup

Conditional popups appear dynamically based on the values of your metrics. With these popups, you can tell at a glance if you’re achieving your goals.

You can use conditional popups to indicate whether or not you’ve hit your target across different dimensions.

In this example, my tooltip displays a green checkmark knob when the value of my metric has surpassed a certain amount.

An example of Conditional Popup in Google Data Studio using the Tooltip annotation

You can also set opposing tooltips that demonstrate when your metrics are below target.

In this example, both the knob and the bubble content are different when my metric is below a certain value.

Knob Content and Button Content change dynamically with the value of New Users

You can set up several levels with different tooltip popups as you need to make your dashboard dynamic and informative.

Here, I use one more popup to let me know if a metric is dangerously low and needs immediate attention.

Knob Content and Button Content change dynamically with the value of New Users for tablet device

So how do you set up conditional popups?

First, go into Edit mode.

We’ll leave the Bubble Content and Knob Content with the default values. Instead, this time we will focus on the Range setting and enable Range 1. (You can set up to five ranges.)

Under the metric that you’d like to have conditional popups, set up ranges according to Minimum and Maximum values. These are the ranges under which your conditional popups will appear..

Setting up the Metric under the Data tab of Google Data Studio

From here, you can configure the component’s bubble content, knob, and style just like earlier.

Setting up the component for Range 1 of Conditional Popup

And that’s all there is to it! Conditional popups are a really simple way to make your dashboards come to life with data.

Adding a Full Overlay Effect in the Popup Component

A full overlay effect is when the pop up completely covers the entire group of components below and displays the bubble content to the user. It is one of the best ways to display more information in a small space, and is thus clean and effective.

You can also create other types of charts using Google Data Studio.

Coming back to our example, we have an i at the top corner which is the Knob Content. If we hover on it, it pops up a tooltip with a full overlay effect. 

Full Overlay effect in a popup component in Google Data Studio

It’s a really nice effect, isn’t it? But there’s a small problem with it.

To create this, you’ll need to resize it to exactly the same dimensions as the group of components. And that can sometimes be really time-consuming.

This full overlay also disrupts the viewer’s ability to interact with the charts below that.

But what if you don’t really care about the fancy aesthetic? If you want a properly functioning tooltip without compromising your report’s features, then I have a workaround for you.

Using HTML to Create a Standard Tooltip

The creative solution is to put HTML under the tooltip. This creates a standard tooltip that doesn’t cover anything below it except for the area that is used to show the icon. 

If you hover on the icon, you can see a standard browser-based tooltip. 

Browser based standard tooltip that doesn’t cover the components of the chart

Bear in mind, this also has its own limitations.

For example, we don’t have any control over the font size or colors or the background colors or any of the aesthetics. But we can show as much information as we want without worrying about spacing since it doesn’t cover anything below. 

To set up a standard tooltip with HTML, go into Edit mode.

Then, use some nifty HTML and a link tag with an empty href. 

It won’t be linked to any web page, but it uses the title attribute to actually place the text for the tooltip inside of it. And for the knob content, we can either put a text or an emoticon just like we did before.

<a href=”#” title =”Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." style=”text-decoration:none;”>⚡</a>
Using the HTML link tag to create a browser based tooltip in Google Data Studio

And that’s how you create a standard tooltip!

Summary

So that’s it!

You can use the tooltip component to show information on a chart without making a report cluttered and busy looking. It’s a great tool to show information only when the user actually wants to know about it. 

You can also set up conditional tooltips that behave dynamically. Lastly, you can use HTML to create a tooltip that doesn’t cover any components below it.

How do you de-clutter your dashboards? Do you use any other tools for visual presentations of your tooltips? Let us know in the comments below!

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Matt
Matt
19 days ago

Is it possible to change the size of the icon? I’ve tried using the inline CSS but to no avail… Any way to make the icon a bit bigger would be much appreciated.

Vanessa
Vanessa
18 days ago

Hi!

How Can I creat a green checkmark icon, for example?

Belinda
Belinda
6 days ago

How can I change the icon size? How can I change the default ? icon to a different icon?

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.