Tooltip

Hover tooltips for chart data. TooltipArea handles mouse tracking and value lookup; ChartTooltip renders the popup; TooltipTemplate formats the content.

Import

import { ChartTooltip, TooltipArea, TooltipTemplate } from 'reaviz';

ChartTooltip Props

Also accepts TooltipProps from reablocks (placement, modifiers, etc.).

TooltipArea Props

Most props are set internally by the parent chart. User-configurable:

TooltipTemplate Props

Default Tooltip (Built-in)

Most charts include tooltips by default — no configuration needed.

Custom Tooltip Content

<AreaChart
  data={data}
  series={
    <AreaSeries
      tooltip={
        <TooltipArea
          tooltip={
            <ChartTooltip
              content={(d, color) => (
                <div>
                  <strong>{d.x}</strong>: {d.y}
                </div>
              )}
            />
          }
        />
      }
    />
  }
/>

Follow Cursor

<ChartTooltip followCursor={true} />

Custom Placement

import { offset } from '@floating-ui/dom';

<ChartTooltip
  followCursor={true}
  modifiers={[offset(5)]}
/>

Disable Tooltips

<AreaSeries tooltip={<TooltipArea disabled />} />

// Or completely remove
<BarSeries tooltip={null} />

Tooltip Value Events

<TooltipArea
  onValueEnter={(event) => {
    console.log('Hovered:', event.value);
  }}
  onValueLeave={() => {
    console.log('Left');
  }}
/>