Chart Tooltip

Import

import { ChartTooltip } from '@marbleui/ui'

Props

<ChartTooltip>

Prop	Type	Default
containerWidth *required	`number`	`—`
rows *required	`TooltipRow[]`	`—`
x *required	`number`	`—`
y *required	`number`	`—`
title	`ReactNode`	`—`

Usage notes

The hover card the built-in charts use: an optional title, then one row per series with a color key, value and label. The charts render their own; use ChartTooltip when you draw a custom plot inside ChartContainer.

<div className="relative">
  <svg width={width} height={160}>{/* marks with pointer handlers */}</svg>
  {hover && (
    <ChartTooltip title={hover.month} x={hover.x} y={hover.y} containerWidth={width}
      rows={[{ label: 'Organic', value: '5.9K', color: 'var(--chart-1)' }, { label: 'Paid', value: '2.4K', color: 'var(--chart-2)' }]} />
  )}
</div>

It is absolutely positioned at x/y in px inside the nearest positioned parent, centred vertically on y, and flips to the left of the point when x is within 180px of containerWidth.
Rows take a preformatted value string. shape is 'line' (default) for lines and areas, 'square' for bars and slices; type rows with ChartTooltipRow. Rows are keyed by label, so labels must be unique.
You own the show/hide state. The tooltip is role="presentation" and ignores the pointer, so screen readers never hear it; make the same values available through the container’s table.

Example source · show

import { ChartTooltip } from './chart-tooltip'

export const styles = {
  Lines: () => (
    <div className="relative h-32 w-80">
      <ChartTooltip
        title="Mar 2026"
        x={0}
        y={64}
        containerWidth={600}
        rows={[
          { label: 'Organic', value: '5.9K', color: 'var(--chart-1)' },
          { label: 'Paid', value: '2.4K', color: 'var(--chart-2)' },
          { label: 'Referral', value: '1.1K', color: 'var(--chart-3)' },
        ]}
      />
    </div>
  ),
  Bars: () => (
    <div className="relative h-24 w-80">
      <ChartTooltip title="Q3" x={0} y={48} containerWidth={600} rows={[{ label: 'Revenue', value: '$48.2K', color: 'var(--chart-1)', shape: 'square' }]} />
    </div>
  ),
}

Source: packages/ui/src/chart-tooltip/chart-tooltip.tsx

Catalog