Cell Hover Tooltip — Design Explorations

Variant E (Quote Stack) as baseline, with size, layout, truncation, and concept variations.

1. Standard — Stats Top (baseline)

The metrics line sits above the quotes. Researcher scans: badge + concentration first, then reads quotes. This mirrors the signal card layout (identity + metrics top, quotes below).

1a. 2 quotes, 2-line truncation

1b. 1 quote (single-quote cell) — no "view signal" needed

1c. 4-quote cell — shows 2, hints at rest

2. Standard — Stats Bottom

Quotes come first — the researcher reads what was said before seeing the numbers. Better for "should I care about this?" decisions where the content matters more than the metric.

2a. 2 quotes, 2-line truncation

2b. 4-quote cell — shows 2

3. Micro Variant (one size down)

Every font size dropped one step on the scale. Badge shrinks to 0.62rem, quotes to 0.72rem, stats to 0.65rem. Fits tighter to the cell — less visual weight, better for dense grids.

3a. Micro — stats top

3b. Micro — stats bottom, 4 quotes (shows 2)

3c. Micro — single quote cell

4. Truncation Length Comparison

How much of a quote do you need to decide if you want to click? Same quote rendered at 1-line, 2-line, and full length. Typical interview quotes run 15–40 words.

4a. 1-line clamp (~40 chars visible)

Verdict: You get the topic but lose the nuance. "couldn't find the search bar" is enough; "menu completely different" works. Good for rapid scanning. Loses "why it matters" detail.

4b. 2-line clamp (~80 chars visible)

Verdict: Sweet spot. You get both the observation and the emotional framing. Most interview quotes (15–25 words) fit entirely in 2 lines at this width.

4c. Full quote (no truncation)

Verdict: Not much taller than 2-line for typical quotes. But a long rambly quote (40+ words) would blow out the tooltip height. Risky without a max-height.

4d. Long quotes — stress test (2-line clamp saves you)

Verdict: 2-line clamp gracefully handles even 60-word quotes. The opening clause is almost always enough to know what the participant is talking about.

5. Context-Only (no redundant labels)

You're hovering over a cell that's already at the intersection of "IKEA Homepage" (row) and "frustration" (column). Repeating those labels in the tooltip wastes space. Instead, the tooltip shows only new information: quotes, stats, and participant IDs. The grid itself highlights the row and column headers to reinforce which cell you're looking at.

5a. Context-only tooltip + highlighted headers (simulated)

Key idea: The row header "IKEA Homepage" gets the frustration-orange background tint, and the column header "frustration" gets highlighted too. The cell itself gets an outline. The tooltip can skip both labels entirely — it's pure content.

5b. Context-only, micro size

6. Additional Explorations

6a. Participant Voice Map — "who said what" focus

For studies with 6+ participants, the key question isn't just "what was said" but "who's represented?" This variant leads with participant presence, showing which voices contributed.

Speaker ID leads each quote line — inverts the standard layout. Good when the analyst cares about breadth of agreement, not just content.

6b. Sparkline + Concentration Bar

A tiny inline bar visualises concentration relative to the study baseline. Makes the number feel tangible — "how far above average is this?"

6c. Intensity Peek — show emotional weight

Dot-based intensity indicator (0–3 scale, matching signal card). Answers: "are these mild observations or strong reactions?"

6d. "No Signal" state — cell with count but below threshold

Cells with quotes but no signal card still benefit from a tooltip. Shows the quotes exist but didn't reach signal threshold.

6e. Compact Confidence Chip — strong/moderate/emerging as visual weight

The confidence level (strong/moderate/emerging) is one of the most actionable data points. This variant makes it prominent via a coloured chip, replacing the text-only concentration display.

6f. Sentence Fragment — first N words only

Instead of CSS line clamping, truncate at the word level with an ellipsis. Feels more intentional than a mid-word CSS cutoff. Shows ~8–12 words per quote.

~10 words per quote. More predictable height than CSS clamp — every quote takes exactly one line. Trade-off: need JS to compute the word boundary instead of pure CSS.

7. Side-by-Side: Stats Top vs. Stats Bottom vs. Context-Only

Same data, three layouts for direct comparison.

8. Recommendation Matrix

* My recommendation: 5 + 3 = Context-only at micro size.
The tooltip shouldn't repeat what the grid already shows. The grid gives you section + sentiment. The tooltip's job is to answer one question: "what did people actually say here?" Context-only at micro size does this in the smallest possible footprint, with participant pips and concentration as a bonus. Combine with row/column header highlighting for spatial reinforcement.

Truncation: 2-line CSS clamp at 320px max-width. Most interview quotes (15–25 words) fit entirely. Long ramblers get gracefully cut. The opening clause almost always carries the key insight.