Tooltip

everviz comes with a powerful tooltip editor. This document explains how you can change the content and layout for your tooltips.



Tooltip editor (basic configuration)

We are going to use this chart as a starting point for the different configurations

If you use your mouse to hover the data, you will see the tooltip appearing showing more information.

To configure the Tooltip, go to the Customize tab and select Tooltip in the left section

Enable or disable tooltip

If you want to turn off tooltips in your charts, simply uncheck " Enable tooltip".

To show tooltips, ensure that the " Enable tooltip" box is checked

Show all series in the tooltip

If you want to display data from all series values when your reader is hovering the mouse over a certain point, you can do this by checking " Show all series".

Based on the chart we are showing in the top of this article, the tooltip would look as follows when enabling " Show all series".

Result when enabling "Shared between series"
Result when enabling "Show all series"

See how this change will affect the tooltip with displaying values for every serie instead of just one.

Change content in the Tooltip

A tooltip consists of a header and a body.

The content of these fields can be changed in two different fields in the Tooltip editor.

Both of these fields allow you to add text, variables, prefixes, suffixes and customize the layout.

Add text to the tooltip

Choose any of the fields, Header and Body and insert desired. Use the styling options in the toolbar to change font-weight, color, size, alignment font etc.

One typical scenario is to add a prefix or suffix in the tooltip. The below example shows how this is achieved to explain that the numbers are in $ USD.

Data values can be inserted as variables. Variables can be identified within brackets {}. In the example above {point.key}, {series.name} and {point.y} are all variables.

To add more a new data value, choose a variable from the " Add data to tooltip" listbox and click the Plus icon. This will insert the variable in the relevant field.

Insert additional data to display in my tooltip

In your Data tab, click on the settings icon.

In the Extras dropdown, choose which column that contains additional data

Go to the Tooltip editor: Customize -> Tooltip

In the body field, insert the variable: {point.extra}

Change the Tooltip design

In the tooltip editor you can also change the design of the tooltip.

Use the controls to select background color, border color, border radius and width.

Advanced options

How to add the date to tooltip?

To set a customized date in the tooltip:

Go to Customize -> Advanced -> Tooltip -> X Date Format. In the X Date Format write the customized date format. Example, to visualize the month and the year, write %B %Y, where %B represents the month and %Y the year.

Note! These parameters are case sensitive. Lowercase is for the month, and uppercase “M” is for minutes.

Check all date reference in this list:

* millisecond: %L * second: %S * minute: %M * hour: %H * day: %A * week: %e * month: %B * year: %Y

Tooltip string formatters

You can use C-style string formatters to quickly format any individual data variable:

{point.y:.0f} gives no decimals
{point.y:.2f} gives two decimals
{point.y:,.2f} gives two decimals with a comma as a thousands-separator.


You can also format dates using the formatting convention described above in How to add the date to tooltip. For instance, the above example can also be written as {point.key: %B %Y} directly in the tooltip editor by customizing the Header section.

How do I add a decimal separator to my numbers in the tooltip?

Go to Customize -> Localization -> Number Formatting -> Decimal separator, type in the separator you want such as a comma or period.

How do I add a thousands-separator to my numbers in the tooltip?

Go to Customize -> Localization -> Number Formatting -> Thousands separator, type in the separator you want to indicate thousands, such as a comma.

How to add signs ($, %, etc.) to the tooltip?

To add $ or % signs go to Customize -> tooltip ->Value Suffix, then add the sign.

Examples: €

Did you find what you were looking for? Thank you! There was a problem submitting your feedback. Please try again later.