How to fix tooltips in older choropleth and symbol maps

At the end of September 2020, we switched from complicated Javascript expressions to easier, Excel-like expressions like ROUND(), UPPER() or FORMAT(). While this hopefully makes it simpler for you to create tooltips in new maps, you might find that the tooltips in maps created before the end of September don't work anymore.

Here's how to fix them.

👉 To find examples of common use cases for tooltips with the new expressions, visit our article "How to customize tooltips".
👉 You can also find the full list of possible expressions in this Github Readme.

Make sure all variable names are lower case

In our new tooltip editor, all column names need to be lower case – otherwise, they won't be displayed. We automatically made column names lower case if they just sit between curly brackets, like so:

{{ Column_Name }}<br>

But if your column names are embedded in some more complex code, you might need to transform them to lower case yourself. So if you see a column name with capital letters, like:

{{ Column_Name * 100 }}%

Make it lower-case, like so:

{{ column_name * 100 }}%

CONCAT() instead of +

Instead of concatenating strings + variables like:

{{ 'Results: ' + results_column + '%' }}
{{ '<div style="background:' + color_column' + '>' + results_column + '</div>' }}

use CONCAT(), like so:

{{ CONCAT('Results: ' , results_column , '%') }}
{{ CONCAT('<div style="background:' , color_column' , '>' , results_column , '</div>') }}

CONCAT() joins together everything you put between the brackets.
For the first example, you can also simply write

Results: {{ results_column }} %

FORMAT() instead of fmt() and to bring back missing separators/decimal points

You will find that your columns might have thousands-separators missing, or that formatting your numbers with fmt() won't work anymore . If this is the case, use our new formatting drop-down menu next to the column button:

You can also write down the expression yourself. So instead of

{{ column_name }}

or the old way of formatting numbers, fmt():

{{ fmt("0,0",column_name) }}

...you'll now need to format your column with FORMAT(). The following expression will bring back thousands-separators:

{{ FORMAT(column_name,"0,0") }}

FORMAT() or ROUND() instead of .toFixed

If you used .toFixed(n) for rounding, use FORMAT() instead – or ROUND(). So instead of using

{{ (column_name * 100).toFixed(0) }}%<br><br><br>

use one of the following – both will work:

{{ FORMAT(column_name * 100,"0") }}%<br>{{ ROUND(column_name * 100) }}%<br><br><br>

If there's anything we haven't covered here and you have trouble fixing your tooltips, do get in touch with us at support@datawrapper.de. We're happy to help.