Tooltip / Details-on-demand

Description

A tooltip is a small, transient overlay that appears near a data mark when the user hovers (or long-presses on touch devices), revealing details that are not encoded in the visual representation itself. This is the most fundamental “details-on-demand” pattern in data visualization, directly implementing the last step of Shneiderman’s Visual Information Seeking Mantra: “Overview first, zoom and filter, then details-on-demand.”

Tooltips are the lowest-cost interaction a viewer can perform: they require no click, no mode change, and no commitment. This makes them an ideal entry point for exploratory analysis. A well-designed tooltip typically shows the exact values of the data point, its label, and possibly derived metrics like percentages or ranks that help the viewer contextualize what they see.

Despite their simplicity, tooltips carry real design decisions. The content must be curated — showing every column from the dataset defeats the purpose. Positioning must avoid occluding nearby marks. And on touch devices, the trigger must shift from hover to tap or long-press, which fundamentally changes the interaction cost. Research by Brehmer and Munzner (2013) classifies this as a “select” action at the lowest level of their task typology — a precondition for nearly every other analytical operation.

Tooltip — try it yourself

Prompt Examples

Try these prompts with Claude, ChatGPT, or other AI tools:

“차트의 각 데이터 포인트에 마우스를 올리면 값, 카테고리, 변화율을 보여주는 툴팁을 추가해주세요.”

“Add interactive tooltips that show the exact value and percentage change on hover.”

When to Use

When the visualization encodes only a few data dimensions but the underlying data has more attributes worth inspecting.
When precise numerical values matter but cluttering the chart with labels would harm readability.
When the audience includes both casual viewers (who may never hover) and analysts (who want exact numbers).
When the chart has many overlapping marks and users need to disambiguate individual points.
As a complement to any other interaction — tooltips are almost always appropriate as a baseline layer.

When NOT to Use

When the data you would show in the tooltip is already visible in the chart (redundant tooltips add interaction cost for zero information gain).
When the visualization is a static export (print, PDF, slide deck) where hover is impossible.
On dense small-multiples where the marks are too small to reliably trigger hover events.
When the tooltip would need to display so much content that a side panel or click-to-expand pattern would be more readable.

How It Works

The user moves the cursor over a data mark (bar, point, line segment, area, map region, etc.).
The system identifies the nearest or hovered datum using hit-testing or Voronoi proximity lookup.
A floating overlay appears near the mark, containing formatted data values, labels, and optionally a small spark visual (like a mini bar or color swatch).
As the cursor moves to a different mark, the tooltip content updates to reflect the new datum. Some implementations smoothly transition the tooltip position.
When the cursor leaves the mark (or the chart area), the tooltip disappears.

On touch devices, steps 1-2 are replaced by a tap or long-press, and the tooltip typically persists until the user taps elsewhere.

Variations

Simple text tooltip: Plain text showing label and value. Minimal styling. Used in most D3 charts.
Rich HTML tooltip: Includes formatted tables, images, sparklines, or mini-charts inside the tooltip. Common in dashboard tools like Tableau.
Voronoi tooltip: Instead of requiring the cursor to be directly over a mark, a Voronoi tessellation assigns every pixel to its nearest mark, making the tooltip far easier to trigger on sparse scatterplots.
Sticky tooltip: Remains visible after hover until the user explicitly dismisses it (click or press Escape). Useful for comparison.
Shared tooltip (crosshair): On line charts, a vertical rule snaps to the x-position and shows values for all series simultaneously.
Annotation tooltip: Instead of transient hover, values are permanently pinned as annotations. This is the static-export equivalent.

Code Reference

// D3.js tooltip pattern for a scatterplot
const tooltip = d3.select("body").append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

svg.selectAll("circle")
  .on("mouseover", (event, d) => {
    tooltip.transition().duration(150).style("opacity", 1);
    tooltip.html(`<strong>${d.name}</strong><br/>Value: ${d.value}`)
      .style("left", `${event.pageX + 10}px`)
      .style("top", `${event.pageY - 20}px`);
  })
  .on("mouseout", () => {
    tooltip.transition().duration(300).style("opacity", 0);
  });