Chart Tooltip

A tooltip appears on hover to provide additional contextual help or information. Tooltips should contain any corresponding values of the hovered datapoint(s). Data visualizations utilize the Spark 4.0 Flare tooltip with a dark background.

Tooltip overview

Usage Guidelines


Truncation

If text exceeds its maximum width, it will be truncated with an ellipsis and a tooltip will be displayed on hover.

Tooltip truncation

Single vs. Double Column

Tooltips can be displayed in either a single or double column depending on its use case.

A single column tooltip is the default and used for things like a truncated label.

A double column tooltip is used for most chart tooltips to display things like the axis title and its value or a series item and its corresponding value.

Double column tooltip spacing
Single column tooltip
Double column tooltip

Anchor vs. No Anchor

A tooltip has an optional anchor. In some scenarios it is useful to include the anchor of the tooltip as it ties the tooltip content to an exact location (eg. A point on a line chart). If the tooltip is corresponding to multiple data points (ie. Hovering the grid line of a line chart), one should use a tooltip without an anchor.

Anchored tooltip
Non-anchored tooltip