Tooltip / Details-on-demand

설명 / Description

툴팁은 사용자가 호버하거나(터치 기기에서는 길게 누르면) 데이터 마크 근처에 나타나는 작고 일시적인 오버레이로, 시각적 표현 자체에는 인코딩되지 않은 세부 정보를 드러냅니다. 이는 데이터 시각화에서 가장 근본적인 "요청형 세부정보(details-on-demand)" 패턴이며, 슈나이더만(Shneiderman)의 시각적 정보 탐색 만트라("먼저 개요, 확대와 필터링, 그다음 요청형 세부정보")의 마지막 단계를 직접 구현합니다.

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.

단순함에도 불구하고 툴팁에는 실질적인 설계 결정이 따릅니다. 내용은 선별되어야 합니다 — 데이터셋의 모든 열을 다 보여주면 목적이 무색해집니다. 배치는 인접한 마크를 가리지 않아야 합니다. 그리고 터치 기기에서는 트리거가 호버에서 탭이나 길게 누르기로 바뀌어야 하며, 이는 인터랙션 비용을 근본적으로 바꿉니다. 브레머(Brehmer)와 문즈너(Munzner)의 연구(2013)는 이를 그들의 과업 유형론에서 가장 낮은 수준의 "선택(select)" 행위로 분류하는데, 이는 거의 모든 다른 분석 작업의 전제 조건입니다.

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

Claude, ChatGPT 등 AI 도구에 다음과 같은 프롬프트를 시도해보세요:

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).
호버가 불가능한 정적 출력물(인쇄, PDF, 슬라이드 덱)로 시각화가 내보내질 때.
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.

터치 기기에서는 1~2단계가 탭이나 길게 누르기로 대체되며, 툴팁은 보통 사용자가 다른 곳을 탭할 때까지 유지됩니다.

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

단순 텍스트 툴팁: 레이블과 값을 보여주는 일반 텍스트입니다. 스타일링이 최소화되어 있으며, 대부분의 D3 차트에서 사용됩니다.
Simple text tooltip: Plain text showing label and value. Minimal styling. Used in most D3 charts.
리치 HTML 툴팁: 툴팁 안에 서식화된 표, 이미지, 스파크라인, 미니 차트를 포함합니다. Tableau 같은 대시보드 도구에서 흔합니다.
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) 툴팁: 호버가 끝난 뒤에도 사용자가 명시적으로 닫을 때까지(클릭이나 Escape 키) 계속 표시됩니다. 비교에 유용합니다.
Sticky tooltip: Remains visible after hover until the user explicitly dismisses it (click or press Escape). Useful for comparison.
공유 툴팁(크로스헤어): 선 그래프에서 수직 룰(rule)이 x 위치에 스냅되어 모든 시리즈의 값을 동시에 보여줍니다.
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);
  });