# chartTooltip

> Bridges a Chart.Bar, Chart.Line, Chart.Area, or Chart.Pie root to its sibling Chart.Tooltip surface: tracks whichever plotted point the pointer or keyboard focus currently resolves to, and mirrors it onto Chart.Tooltip's rows and position.

```ts
import { chartTooltip } from "@sdxc/ui/mixins";
```

Adds pointer- and focus-tracked tooltip coordination to a Chart.Bar,
Chart.Line, Chart.Area, or Chart.Pie root, resolving the active point and
its group into the sibling Chart.Tooltip's rows, position, and events.

## Signature

```ts
chartTooltip(): MixinDescriptor<HTMLElement>
```

Returns: A mixin descriptor for a chart root's `mix` prop.

## Examples

```tsx
<div mix={[css({ position: "relative" })]}>
  <Chart.Bar data={points} mix={chartTooltip()} />
  <Chart.Tooltip>
    <Chart.Tooltip.Row>
      <Chart.Tooltip.Label />
      <Chart.Tooltip.Value />
    </Chart.Tooltip.Row>
  </Chart.Tooltip>
</div>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/mixins` too.

### ChartTooltipChangeEvent

Dispatched on a chart root by chartTooltip every time the active
point set changes, carrying every active point's label and value so a
consumer can drive a live-region announcement or cross-highlight a legend.

#### Signature

```ts
new ChartTooltipChangeEvent(points: readonly ChartTooltipPoint[])
```

#### Properties

| Property | Type | Description |
| --- | --- | --- |
| `points` | `readonly readonly ChartTooltipPoint[]` | Every currently active point's label and value, in document order, or an empty array when nothing is active. |

### CHART_POINT_ATTRIBUTE

Attribute every plottable point a chart root renders carries: a bar's
`<rect>`, a line or area's vertex marker, or a pie's wedge `<path>`.
`chartTooltip()` reads it to build its pointer-tracked candidate set.

#### Signature

```ts
const CHART_POINT_ATTRIBUTE = "data-chart-point"
```

### CHART_POINT_LABEL_ATTRIBUTE

Attribute a point carries its already-localized label on — the category,
series name, or slice name a chart renders it under. `chartTooltip()`
copies it unchanged into the matching row's CHART_TOOLTIP_LABEL_ATTRIBUTE.

#### Signature

```ts
const CHART_POINT_LABEL_ATTRIBUTE = "data-chart-label"
```

### CHART_POINT_VALUE_ATTRIBUTE

Attribute a point carries its already-formatted value on, rendered through
the consumer's own `Intl` formatting. `chartTooltip()` copies it unchanged
into the matching row's CHART_TOOLTIP_VALUE_ATTRIBUTE slot.

#### Signature

```ts
const CHART_POINT_VALUE_ATTRIBUTE = "data-chart-value"
```

### CHART_POINT_GROUP_ATTRIBUTE

Attribute an ancestor of a cluster of related points carries — every
series' point for one category in a grouped bar chart. Every point beneath
the nearest such ancestor populates the tooltip together, one row each.

#### Signature

```ts
const CHART_POINT_GROUP_ATTRIBUTE = "data-chart-group"
```

### CHART_TOOLTIP_ATTRIBUTE

Attribute Chart.Tooltip's own root element carries. `chartTooltip()` finds
it among its host's parent element's descendants — the sibling
relationship a chart root and its Chart.Tooltip render in.

#### Signature

```ts
const CHART_TOOLTIP_ATTRIBUTE = "data-chart-tooltip"
```

### CHART_TOOLTIP_ROW_ATTRIBUTE

Attribute every pre-rendered row inside Chart.Tooltip carries, one per
series it could ever need to show, in document order. `chartTooltip()`
fills as many as the active point set holds and hides the rest.

#### Signature

```ts
const CHART_TOOLTIP_ROW_ATTRIBUTE = "data-chart-tooltip-row"
```

### CHART_TOOLTIP_LABEL_ATTRIBUTE

Attribute the element inside a Chart.Tooltip row that receives the active
point's CHART_POINT_LABEL_ATTRIBUTE text carries.

#### Signature

```ts
const CHART_TOOLTIP_LABEL_ATTRIBUTE = "data-chart-tooltip-label"
```

### CHART_TOOLTIP_VALUE_ATTRIBUTE

Attribute the element inside a Chart.Tooltip row that receives the active
point's CHART_POINT_VALUE_ATTRIBUTE text carries.

#### Signature

```ts
const CHART_TOOLTIP_VALUE_ATTRIBUTE = "data-chart-tooltip-value"
```

### CHART_TOOLTIP_X_PROPERTY

CSS custom property `chartTooltip()` writes on Chart.Tooltip's host with
the active point's horizontal pixel offset, relative to the chart root's
own parent element, for its own styling to read back via `var()`.

#### Signature

```ts
const CHART_TOOLTIP_X_PROPERTY = "--ui-chart-tooltip-x"
```

### CHART_TOOLTIP_Y_PROPERTY

CSS custom property `chartTooltip()` writes on Chart.Tooltip's host with
the active point's vertical pixel offset, relative to the chart root's own
parent element, read back the same way as CHART_TOOLTIP_X_PROPERTY.

#### Signature

```ts
const CHART_TOOLTIP_Y_PROPERTY = "--ui-chart-tooltip-y"
```

### ChartTooltipPoint

One point's already-localized label and value text, read off
CHART_POINT_LABEL_ATTRIBUTE and CHART_POINT_VALUE_ATTRIBUTE,
as carried by ChartTooltipChangeEvent.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `label` | `readonly string` | The point's label, copied from CHART_POINT_LABEL_ATTRIBUTE unchanged. |
| `value` | `readonly string` | The point's value, copied from CHART_POINT_VALUE_ATTRIBUTE unchanged. |