Guidelines

Intro

Part of the Data Tooltip Component Family.

In-lane data tooltips appear as an overlay within the chart when the user interacts with a data point. There are two interaction modes: a Tap gesture (single tap on a data point) and a Scrub (press + drag) gesture (press and drag left/right to scrub across the chart).

Anatomy

Primary Label: Dimension label for the selected data point
Primary Value: Key metric value for the selected data point
Horizontal Divider: Separates primary and secondary content
Data Rows: Holds secondary label/value pairs for the selected point
Secondary Label: Dimension label for the secondary data point
Secondary Value: Value for the secondary data point
Close Button (optional): Dismisses the tooltip. Present on tap interaction for in-lane tooltip only.
Show More Button (optional): Reveals truncated content and additional rows by presenting a detail panel (bottom sheet). Present in specific cases for in-lane tooltip only – see Show More for more details.
Pointer (optional): Connects in-lane tooltip with the user’s active scrubbed area on the chart. Present on scrub interaction for in-lane tooltip only.

Anatomy diagram of three in-lane and fullscreen data tooltip variants with numbered callouts (1–11) labeling components: measure label, value, dimension rows, separator, highlighted row, close button, anchor line, Show More link, pagination dots, chart title, and subtitle

In-Lane Data Tooltips – Anatomy

Types

There are two types of Data Points: Single and Multi. The user’s selection on the chart will determine which is shown, where a single selection would show a single data point, and a group selection would show a multi-data point.

Single Data Point

Side-by-side view of a donut chart showing Expenses by Category, with an in-lane tooltip open displaying 2.28k (32.91%) for the Rent category, alongside the corresponding fullscreen bottom sheet tooltip showing the same data

Single Data Point – In-Lane Tooltip and Show More

Multi-Data Point

Multi-data point tooltips are used to show all related data points to an area of the chart.

Side-by-side view of a Rainfall, Temperature in Canada combo chart with a multi-series in-lane tooltip open for August showing Max Temperature 25.4, Min Temperature 14.3, and Rainfall 43, alongside the corresponding fullscreen bottom sheet layout

Multi-Data Point – In-Lane Tooltip and Show More

Behavior and Interaction

There are two interaction modes for the in-lane data tooltip: Tap gesture and Scrub (press + drag) gesture. These behave differently depending on if the chart is single or multi series.

Tap gesture

The in-lane data tooltip is triggered by a single tap on a data point. To close the tooltip, the user can select the close button, or tap away from the data point.

Two-state diagram showing a tap on a scatter plot opening a tooltip with Revenue 1,115,823.07 and Cost 612,948.56, with other data points dimmed

Tap Interaction on a Scatter Chart

Multi-Series

For multi-series charts, a tap on a chart point will display a single data point tooltip similarly to a single-series chart.

Two-state diagram showing a tap on a combo chart opening a multi-series in-lane tooltip for August, with the selected month highlighted and other data dimmed

Tap Interaction on Multi-Series Chart – Single Data Point

Additionally, the user can tap on a segment hit zone to show a multi-data point tooltip. The chart is divided into tap zones based on the midpoint between adjacent data points. Each zone spans from the midpoint before a data point to the midpoint after it. Tapping this area triggers the multi-data point tooltip anchored at the tap position.

Two-state diagram showing a tap on a bar in a combo chart opening a multi-series tooltip for August with all three measures displayed and the selected column highlighted

Tap Interaction on Multi-Series Chart – Multi-Data Point

Scrubbing (press + drag) gesture

The in-lane data tooltip is triggered by a press-and-hold, then dragged left or right to scrub across the chart. As the user scrubs across different data points, the values inside the tooltip will update with the selected values. When the user lets go of the scrub, the tooltip will close if it is a single data point tooltip, but will persist if it is a multi-data point tooltip.

Two-state diagram showing long press and drag on an area chart scrubbing the tooltip from Q4 2025 (110.6k) to Q2 2026 (95.7k)

Scrubbing interaction on an Area Chart

Multi-Series

On multi-series charts, scrubbing on a chart will display a multi-data point tooltip.  Unlike the single series chart, when the user lets go of the scrub, the tooltip persists and the close button appears.

Long press and drag on a multi-line Sales Revenue chart scrubs the tooltip from June (California 109.17, Oregon 84.36) to April (California 77.82, Oregon 114.52)

Scrubbing From June to April on Multi-Series Chart – Multi-Data Point

For grouped chart types, if the user press-holds the bar to start, the scrub goes through the individual segment. If they start on a segment hit zone, the scrub goes through groupings.

Long press and drag on a Rainfall, Temperature combo chart keeps the tooltip on August as the pointer stays within the same column, with values updating slightly between states

Scrub on Bar Goes Through Individual Points

Long press and drag on a Rainfall, Temperature combo chart scrubs the tooltip from August (Max Temp 27.7, Min Temp 14.5, Rainfall 43) to July (Max Temp 24.6, Min Temp 14.2, Rainfall 57)

Scrub on Segment Hit Zone Goes Through Groupings

Show More

The Show More button is present when any of the following cases are true:

Label or value is truncated
More than 3 data rows

When the Show More button is selected, the user is presented with a detail panel (bottom sheet) at the bottom of the screen and the in-lane tooltip is dismissed. For more details, see the Bottom Sheet specification.

Mobile two-state diagram showing "Show More" tapped on an in-lane tooltip for a Sales Revenue donut chart, which opens a fullscreen bottom sheet with the complete data point details including industry classification

Show More Interaction Opening the Bottom Sheet

Pointer Behavior

The pointer centres with the selected data segment or points. For more details see Pointer Specification.

If the tooltip is within 16 pt of the container edge, the pointer repositions under the tooltip to remain centred on the scrub selection.
The bottom of the pointer always ends at the data mark.
For horizontal bar charts, the scrub pointer always points to the edge of the bar.
For multi-series charts, the pointer always anchors to the horizontal (or vertical, depending on axis) midpoint of the target segment's bounding box, and vertically spans to the bottom axis line.
- For grouped segments: treat the group as a single bounding box — pointer anchors to the midpoint of the combined span, not any individual segment within it.

Long press and drag on an Expenses in Thirds grouped bar chart scrubs the tooltip from Groceries 8.3k (1st third) to Rent 7.9k (3rd third)

Edge Placement and Center Positioning

Long press and drag on a Sales Revenue by City horizontal bar chart scrubs the tooltip from Washington, DC (12.12M) to Vancouver, WA (2.28M)

Horizontal Bar Charts Pointers are Positioned at the End

Responsiveness

Joule Work Mobile does not support landscape display at this time.

Accessibility

Dynamic Type – Bottom Sheet

The Show More detail panel (bottom sheet) supports Dynamic Type with a maximum scale of 2x. For more details see Show More Detail Panel Specification.

Fullscreen bottom sheet tooltip for Sales Revenue by Industry showing a long numeric value wrapping across two lines due to large dynamic type, with Calendar Month and Industry Classification dimensions below