Custom tooltips - Lightdash

By default, tooltips will show the x-axis value, the y-axis field name, and the y-axis value, like this:

You can customize tooltips to show additional metrics or table calculations that are included in your chart (on any of the axes). You can even include notes, links, or custom formatting for additional context. To use this feature, go to Configure chart > Display > Custom Tooltip. HTML is allowed in the Custom tooltip code, but Javascript is disabled. You can also select variables from your chart, from any of the axes, even on grouped charts. Start typing the name of the field, and we’ll autocomplete with the right variable. A variable resolves to the field’s value at the point you hover, not to the field’s description from your .yml. To explain what a metric means, type the definition into the tooltip. It won’t update when the .yml description changes. Table charts show each field’s .yml description when you hover its column header.

Here is an example code block for a custom tooltip:

<strong>💰 Profit this month:</strong>
 ${dbt_orders_sum_of_profit}
<br>
<strong>🛒 Average basket this month:</strong>
 ${dbt_orders_average_of_basket_total}
<br>
<strong>💳 Total Orders this month:</strong>
 ${dbt_orders_count_distinct_order_id}

<h3>Additional resources:</h3>

Check out the <a href="https://analytics.lightdash.cloud/projects/21eef0b9/dashboards/e2b82df2/view">Sales Dashboard</a> and the Notion doc about <a href="https://notion.so">Orders and Revenue KPIs</a>.

The above code will look like this in the tooltip:

Custom tooltips will show up on saved charts, dashboards, and the code will be included in dashboards as code downloads.

If you need to show some data that is not included in the chart (eg: a dynamic URL, or an ID) , you can even create a table calculation, and include it on on the chart as an extra axis to use this variable on the tooltip.

If a tooltip lists the same field several times for one x-axis value, check the query for dimensions that aren’t used on the x-axis, y-axis, or group. Each extra dimension splits a category into several result rows, and the chart plots one point per row. Lightdash flags this with a yellow warning icon on the chart that names the unused dimensions. Remove them from the query to get one entry per series.

Tooltips on grouped charts

Which fields a tooltip can use depends on whether the chart has a group set in Layout. Without a group, every dimension, metric, and table calculation in the query results is available as a variable, whether or not it’s plotted. With a group, only fields plotted on the chart are offered when you type $ and resolve in the tooltip, so a table calculation that appears only in the results table renders blank. To use an unplotted field on a grouped chart, add it as an extra y-axis field. If you don’t want it drawn, click the eye icon next to its series in Configure chart → Series to hide it. A hidden series still resolves in the tooltip.

Reference a specific group

On a grouped chart, ${field_id} resolves to the value for the group you’re hovering. When the tooltip covers every group at once, such as when you hover a whole stacked column, it has no single group to use and shows the first group’s value. To show each group, reference it explicitly as ${field_id.group_field_id.group value}:

% Completed: ${orders_percent_of_total.orders_status.completed}
<br>
% Returned: ${orders_percent_of_total.orders_status.returned}

These references also appear in the $ autocomplete.

Explicit references don’t resolve for group values that contain &. Group by a custom dimension that replaces the & instead.

​Repeated tooltip entries

​Tooltips on grouped charts

​Reference a specific group

Repeated tooltip entries

Tooltips on grouped charts

Reference a specific group