PhiaUi.Components.Data.ChartTooltip (phia_ui v0.1.17)

Copy Markdown View Source

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>

Summary

Functions

chart_tooltip(assigns)
chart_tooltip_frame(assigns)

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

chart_tooltip_header(assigns)

Tooltip header row with label text and bottom border.

chart_tooltip_row(assigns)

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

Functions

chart_tooltip(assigns)

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(assigns)

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(assigns)

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(assigns)

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.