When a tooltip earns its place, what goes in it, and how to keep it from hiding the data it describes. The Interaction guideline has the short rules that apply to every chart.
What it is for
A tooltip shows the exact values behind the mark under the pointer or the keyboard focus: the figure with its unit, the date or category, and the other series at the same point. The chart answers what is going on. The tooltip answers how much, for one point at a time.
When to use
The reader wants exact figures, but a label on every mark would crowd the chart.
Several series share an x value and the reader compares them at one date. One tooltip lists every series at that date.
A mark carries detail that does not fit on the chart: a name, a status, a breakdown into parts.
The points are dense, as in a scatter plot, and the reader wants to identify one of them.
Use something else when
There are few marks and room to label them. Label them directly, so there is nothing to hover.
One value is the point of the chart. Put it in the title or in a statistic above the chart.
The reader compares many exact values. Give a table, which they can scan and sort.
The chart is printed, exported or shared as an image. The tooltip does not survive, so put the values in labels or a caption.
Most readers use a phone and the marks are small. Show the selected value in a readout above the chart, and let a tap change it.
Do it well
Match what the tooltip focuses to the reader's question. To compare series at one date, focus the whole date and list every series. To pick one point out of many, focus the nearest point.
Use the shared value as the title, formatted for people: Jul 16, 2024, not 2024-07-16.
Give each row the series name, its color and the value with its unit, in the same number format as the axis.
Order the rows like the marks or like the legend, and keep that order as the reader moves from point to point.
Keep it to about two to six rows. Put more detail in a state the reader opens with a click.
Place it next to the point, not on top of the marks the reader is comparing. On grouped charts, anchor it to the group so it does not jump between series.
Add a total row only when the parts add up to something the reader cares about.
Pitfalls
The tooltip holds the only copy of a value. Touch, keyboard and screen reader users can miss it, and print loses it. See Hover and motion.
A tooltip that follows the pointer and covers the next mark. Anchor it to the point instead.
Values in empty space. When hovering anywhere snaps to a point, gaps in the data look filled. Snap from any distance only on continuous lines, where every x has a value.
Raw values: no unit, too many decimals, a date in machine format.
A tooltip cut off by a card or a scrolling container. Render it in a layer above the page.
Buttons or links inside a tooltip that moves with the pointer. The reader cannot reach them. Put controls only in a tooltip the reader has pinned.
A color dot as the only link between a row and its series. Keep the series name in every row, since close colors are hard to match.
Patterns
Series rows: the date as the title, one row per series with its color. The default for grouped bars and several lines.
Custom indicator: a thin bar or an icon in place of the dot, repeated in the legend so the reader learns it once.
Custom or no title: rename the heading, or drop it when the x value is already obvious.
Formatted values: a unit on every value, for a compact list.
Total row: the parts, then their sum.
Nearest point: one value for the closest point, for a single series.
Grouped: every series at the hovered x, with a band behind that x.
Voronoi cells: every point owns the area nearest to it, so the pointer always lands on a point in a dense scatter.
Pinned details: a click pins the tooltip and opens a breakdown or a small chart inside it.