Custom Tooltips
Overview
Available as of the 2025_09 release with an initial rollout covering both Custom and Normal Maps, this feature allows you to customise a Chart’s tooltip in terms of what information is displayed ( including the ability to add Additional Data) and how it is presented.
The feature is accessed via the Edit Chart Screen with a new ‘Tooltips’ tab being available for the currently supported Chart Types:
Once active, you will find that alongside a chart preview the default Tooltip has been broken down into its constituent sections alongside those representing any Additional Data that has been added to the Chart. These sections are presented in the order they currently appear on the Tooltip:
Available Customisations
‘All’ settings
In the screenshot above, there is a right-aligned ‘header’ row with the following options: “Enable All”, “Disable All”, and “Default All”. These are the ‘All’ settings and they allow you to make changes to all of the sections at once. Each of these options corresponds to a setting in the individual sections with ‘Enable/Disable’ being the same as selecting/deselecting the ‘Enabled’ checkbox and ‘Default’ removing any customisations in the same way the ‘backwards arrow’ icon at the bottom-right of a Section does.
Ordering Arrows
The arrows on the side of a section allow you to switch its current position with the section directly above/below it both on this screen and in the resulting Tooltip. Otherwise default sections that have had their order changed will no longer be considered default and if reset will attempt to return to their original position (it depends on other ordering modifications).
Enabled Checkbox
The “Enabled” Checkbox toggles the visibility of this section within the tooltip. Disabling a section does not remove any customisations you have made but nothing related to it will appear within the Tooltip.
Reset to Default
Denoted by a reverse arrow icon, the ‘Reset to Default’ action will return that section to its default configuration. This means any customisations will be lost and it will attempt to place itself back into its default ordering position. Default tooltip sections are not persisted to the Database including those that end up matching their default configuration through manual editing rather than the use of this action.
Custom Label
Most, though not all, Tooltip Sections are presented as ‘Key:Value' pairs with the Label (key) being derived either from the data object used or an associated ‘MessagesStatic’ entry. Blank by default (for non-Additional Data sections), entries into this field will appear in place of the default label in the resulting tooltip.The contents of this field can be plain text or HTML. Label specific styling can be achieved within the HTML Template instead, e.g. by the addition of <span> tags, and this is what we would generally advise in order to keep the Label value simple for the purposes of translation.
As mentioned above, this field is translatable with the contents of this field appearing in your Generate Language File if not already present. Variable replacement is also supported. The resolved value of the field will replace the __LABEL__ placeholder in the HTML Template as described in the next section.
HTML Template
This field allows you to make small edits or complete overhauls to the HTML for this section of the Tooltip. Defaulting to whatever HTML was in place prior to this functionality, you can add ‘class(es)’ and ‘style(s)’ or change the structure by adding your own <span>s around individual elements or splitting things out into multiple lines via <div>s.
Most default templates consist of ‘Label:Value’ pairs and these are present within the Template in the form of the placeholders: __LABEL__ and __VALUE__. These placeholders can not only be re-ordered but entirely removed. For example, a HTML Template that does not contain the __LABEL__ placeholder will only display the value even if a ‘Custom Label’ has been defined.
This field also supports translation and the use of variables. Please note, prior to being displayed on the tooltip the entire HTML (all sections with all placeholders replaced) will be sanitised meaning malformed HTML or certain customisation could result in ‘missing’ modifications. See this section for a list of the currently allowed attributes, tags, and styles.
Other Information
Additional Data
In order to make an Additional Data section available for Tooltip customisation, all you have to do is add it via the pre-existing Additional Data tab. This will create a new section, disabled by default, that you can then customise.
As a convenience feature, the ‘Custom Label’ field will be populated by the Data Objects Display Name if the field is blank and the section is enabled. This label can of course be removed but it allows the default presentation to match the most common ‘Label: Value’ structure. Removal of the Additional Data will also result in the removal of the Tooltip section and any customisations.
HTML Sanitisation Allowed List
These restrictions are likely to be relaxed in the near future, but for now here is a list of all of the currently permitted HTML attributes, tags, and styles:
Attributes: class, style
Tags: b, strong, i, em, u, br, span, div
Styles: color, background-color, font-weight, font-style, font-size, text-decoration, line-height, text-align, white-space, margin, margin-top, margin-bottom, margin-left, margin-right, padding, padding-top, padding-bottom, padding-left, padding-right
MessagesStatic Entries
chart.editor.tabs.tooltips.label=Tooltips
chart.editor.tooltips.all.enable=Enable All
chart.editor.tooltips.all.enable.title=Enable all Tooltip Sections
chart.editor.tooltips.all.disable=Disable All
chart.editor.tooltips.all.disable.title=Disable all Tooltip Sections
chart.editor.tooltips.all.reset=Default All
chart.editor.tooltips.all.reset.title=Reset all Tooltip Sections to their default values
chart.editor.tooltip.custom.label=Custom Label
chart.editor.tooltip.custom.label.help.text=The value to use in place of the default label for this tooltip provided the __LABEL__ placeholder is still within the defined HTML. It can be plain text or HTML
chart.editor.tooltip.html=HTML Template
chart.editor.tooltip.html.help.text=The HTML template that will be used to render this section of the tooltip. Uses __LABEL__ and __VALUE__ placeholders to define where those elements will be inserted in the structure. These placeholders are optional e.g., you can create a 'Value Only' tooltip by removing __LABEL__. The HTML with these placeholder replaced will be sanitised before being rendered, so it is worth checking for HTML issues and typos if it appears that some styling has not applied
chart.editor.tooltip.enabled=Enabled
chart.editor.tooltip.enabled.help.text=If checked, this section will appear in the chart's tooltip if applicable. Note, some sections are tied to Chart Attributes or data properties so the section may not appear even if enabled
chart.editor.tooltip.reset.to.default.help.text=Reset this tooltip section to its default values. This includes the place it occupies in the tooltip section ordering
chart.editor.tooltip.arrow.up.help.text=Make this tooltip section appear one position earlier in the tooltip
chart.editor.tooltip.arrow.down.help.text=Make this tooltip section appear one position later in the tooltip
tooltips.section.label=Label
tooltips.section.legend=Legend
tooltips.section.value=Value
tooltips.section.lat=Lat
tooltips.section.long=Long
tooltips.section.detail=Detail
tooltips.section.percentage=Percentage