Tooltips are labels that appear when end users hover over data points in a visualization. They generally appear across all charts and display a combination of numbers, text, and/or legend tokens. Tooltips enable end users to focus on specific data points, and also provide more information about the data that is being hovered.
These tooltip guidelines apply to all data visualizations. For typography details on tooltips, see our page on typography.
Use tooltips to give users more details about data points.
Use tooltips to declutter your chart. If a specific piece of information is not the primary goal of your chart, consider making it available on demand. For example: if your axis labels consist of dates and the year is implied, you could only mention the year in the tooltip.
Only show tooltips on hover.
Follow specific guidelines for tooltip spacing, as illustrated below:
Tooltips should always be placed at "the end" of a chart. That is, on top for vertically-oriented charts and on the right for horizontally-oriented charts.
The tooltip is placed at the end of the corresponding bar and is centered to the label.
Placing a tooltip on top for a horizontally-oriented chart will prevent end users from seeing all the data.
Sometimes, the text in a tooltip can get long. We recommend shortening your labels to reduce clutter and increase legibility. When it's not possible to shorten them, we keep the maximum width of the tooltip at 288px. In these cases, we only truncate the descriptor and not its corresponding value. Align items on the top and always keep 8px in-between for readability.
The content displayed in tooltips should repeat the data values that are being hovered. In some cases, you might want to add additional relevant information. A tooltip typically consists of three parts: a header (1), a descriptor (2) and the descriptor’s corresponding value (3).
You can add an extra dimension if it adds value for end users. However, we advice against this for charts that display more than one category.
It's possible to add an additional metric for the same category. Only do so if it's useful information for end users.
Adding an extra dimension—when there is more than one category in the tooltip—makes it really difficult to read the data.
Hover behaviors vary depending on the type of data visualization. As a general rule of thumb, bring focus to the element that is being hovered by dimming other elements. Additionally, we increase the hover area to make it more accessible. For chart-specific hover behaviors, see the corresponding pages of available charts.