How to customize

Tooltips in Datawrapper 

Add more detail and information to your visualization.

What you learn


1.

How to add tooltips 

A general overview

2.

Using HTML for the tooltip

Options to style your information further

3.

Using Javascript for the tooltip

How the syntax looks like 

What is a tooltip?

A tooltip is "a message which appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface."

Usually it is a small window that provides additional information. In Datawrapper you can use tooltips in your visualizations. 

This tutorial tells you how to add tooltips in several ways to your visualizations, specifically the Datawrapper maps. 

The custom tooltip editor opens after you click the button shown above. It lets you edit the content of the title and the body of the tooltips or overlays that are displayed when the user hovers over data elements in charts and maps. The right side of the editor shows the column titles of the dataset you uploaded. Whenever you click a column title, it will be inserted into the title or body field at the current cursor position.

Below is a brief animated gif showing how the Datawrapper tooltip editor works:


Tooltips accept free HTML

You can insert free HTML into the fields which allows you to display whatever you want in the tooltips. Here’s an example for a tooltip that shows an HTML table:


Using JavaScript in tooltips using {% .. %}

Using JavaScript code blocks {% ..code.. %} you can insert JavaScript code anywhere in your tooltip. Here’s an example for a conditional tooltip: a tooltip that changes based on the value of a column:

The only difference between the {{ }} and the {% %} tags is that the return value of expressions inside {{ }} is always printed to the tooltip. If you want to output text from {% %} tags, use the print() function. In the following example, both lines produce identical output:


Formatting numbers in tooltips using JavaScript

You can change the number format in tooltips by using JavaScript functions:



Other Interesting Tutorials

How to create a Stacked Column Chart

Learn how to create a stacked column chart in minutes with Datawrapper.

View Guide

All-new line charts

Datawrapper has completely revamped line charts: More responsive, cleaner and with annotations.

View Guide