U6.09.1Tooltips carry exact valuesdesign

A tooltip's one job is trading the chart's approximate shape for the exact number underneath it

Aliases: hover tooltip · tooltip

What it is

The tooltip's core duty in a visualisation is singular: exchange the graphic encoding's approximate value for the exact one. The chart handles shape and comparison ("this bar is taller than that one"), the tooltip handles exact numbers ("this one is 3,482"). The division keeps the chart clean — no need to stuff number labels everywhere for precision's sake — while exact lookup stays one gesture away.

Why it happens

The tooltip can carry this duty because it patches the precision ceiling of graphic encoding: position and length read accurately but finitely, the reader estimates "around three and a half thousand," and the tooltip supplies the exact figure on demand. The hover interaction's cost structure also fits: hovering is zero-cost probing — move to query, no click, no state change, so readers can sweep many points without polluting the current view. The tooltip's responsiveness follows the dynamic-query logic: it must track the pointer in real time; a laggy tooltip gets abandoned. Tooltip content is the chart's "second channel," free of encoding-precision limits and free to carry metadata (share, period-over-period, definition scope) — though every added field dilutes the prominence of the core value.

Where it stops holding

Three inherent limits: first, the tooltip exists only under the pointer — its content cannot be compared side by side and does not survive screenshots or print, so a chart whose critical readings live only in tooltips fails on static media; second, occlusion — the floating layer covers nearby marks and needs collision-avoidance in dense regions; third, the touchscreen gap — the next card's subject. Design must also prevent the tooltip from becoming an information dump: everything-in-the-tooltip means nothing is prominent; core value, identity, and units first, remaining fields tiered below.

Applying it

  • Ship charts without number labels by default; the tooltip carries exact values, with only critical extremes labelled permanently.
  • Put identity and the core value (with units) on the tooltip's first line; fold or demote secondary fields.
  • Verification: ask readers for a specified point's exact value and its comparison to a neighbour; tooltip reachability and correct content mean it passes — guessed answers mean the tooltip is missing or too slow.

Related

  • Same group: U6.09.2 Touchscreens have no hover and need alternative paths · U6.09.3 Tooltip content must include identity information
  • Nearby: U6.03.2 Dynamic queries demand real-time response · U5.01.2 Direct labelling eliminates the round-trip
  • Search terms: tooltip design · hover detail · exact value on demand

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/U6.09.1