DataHoverBreakdown
A pointer-following card that breaks a row's number and drawing down into the items it's made of — a one-line 28 px title with the main datapoint in the upper right, tight context lines, a full-width summary drawing, then the items flowing into columns (down, then across). The card sizes to its content up to maxWidth (default: the window), where the title truncates. Placed above the pointer from its measured height (below when there's no room), always inside the window. Without items it's a plain tooltip. Extracted from design c100 (lever-strip variations).
A pointer-following card that breaks a row's number and drawing down into the items it's made of. Hover a row below — the first is driven by the prop editor; switch on pinned to hold it open while you tune props. Extracted from design c100 (lever-strip variations), where every lens's row hovers into its people.
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| x | Number | required | Pointer clientX — the card sits 14 px to its right, clamped inside the window |
| y | Number | required | Pointer clientY — the card sits above it when it fits (so the rows being scanned stay visible), else below |
| title | String | '' | The hovered thing's name, top left |
| titleSize | Number | 28 | Title font-size in px |
| metric | { label, value } | null | The main datapoint — value big and bold in the upper right, its label under it |
| metricSize | Number | 22 | Datapoint font-size in px |
| lines | String[] | [] | Context lines under the header, 12 px on 16 px leading |
| items | Array | [] | The breakdown, in reading order — each rendered by the #row slot (`key` used when present). Empty → a plain tooltip |
| footer | String | '' | A subtle line under the list — what the columns mean, what's left out |
| colWidth | Number | 240 | Width of one column of rows in px |
| rowsPerCol | Number | 12 | Target rows per column; columns = ceil(items / rowsPerCol), capped by the window width |
| colGap | Number | 28 | Gap between columns in px |
| plainWidth | Number | 260 | Max width when there are no items (the plain tooltip) |
| maxWidth | Number | null | Cap on the card's width (default: the window). The card sizes to its content — at least its columns, wider for a longer title or footer — up to here, where the one-line title truncates; also caps how many columns fit |
Slots
| Slot | Description |
|---|---|
| summary | Scope { width } — a drawing over the list spanning every column (width = the list's inner width), e.g. the row's bar at full size, plus a summary line |
| row | Scope { item, index } — one item, laid out in a 16 px flex row (items-center, gap-2): typically a name, its piece of the drawing, a value and an aside |