# `PhiaUi.Components.Data.ChartTooltip`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/chart_tooltip.ex#L1)

Chart tooltip components — pre-positioned SVG tooltip shell and HTML tooltip composition.

Provides two patterns:

1. **SVG tooltip** (`chart_tooltip/1`) — `<foreignObject>` inside SVG, zero JS
2. **HTML tooltip composition** — Tremor-inspired Frame + Row pattern for building
   rich tooltip content outside SVG

## SVG Tooltip Example

    <.chart_tooltip x={100} y={50}>
      <span>Revenue: $350</span>
    </.chart_tooltip>

## HTML Tooltip Composition Example

    <.chart_tooltip_frame>
      <.chart_tooltip_header label="January 2024" />
      <.chart_tooltip_row name="Revenue" value="$1,234" color="oklch(0.60 0.20 240)" />
      <.chart_tooltip_row name="Cost" value="$890" color="oklch(0.65 0.22 30)" />
    </.chart_tooltip_frame>

# `chart_tooltip`

## Attributes

* `x` (`:any`) (required) - X position in SVG coordinates.
* `y` (`:any`) (required) - Y position in SVG coordinates.
* `visible` (`:boolean`) - Whether the tooltip is visible. Defaults to `true`.
* `width` (`:integer`) - Tooltip width in px. Defaults to `120`.
* `height` (`:integer`) - Tooltip height in px. Defaults to `40`.
* `theme` (`:map`) - Chart theme overrides. Defaults to `%{}`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `chart_tooltip_frame`

Styled tooltip container with rounded corners, shadow, and border.

Inspired by Tremor's `ChartTooltipFrame`. Use as a wrapper around
`chart_tooltip_header` and `chart_tooltip_row` components.

## Attributes

* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `chart_tooltip_header`

Tooltip header row with label text and bottom border.

Inspired by Tremor's tooltip label section.

## Attributes

* `label` (`:string`) (required) - Header label text.
* `class` (`:string`) - Defaults to `nil`.

# `chart_tooltip_row`

Individual tooltip row with color swatch, name, and value.

Inspired by Tremor's `ChartTooltipRow`. Shows a colored dot indicator,
the series name, and the formatted value.

## Attributes

* `name` (`:string`) (required) - Series/category name.
* `value` (`:string`) (required) - Formatted value string.
* `color` (`:string`) (required) - Swatch color (CSS color string).
* `class` (`:string`) - Defaults to `nil`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*