Tooltip

import { Tooltip } from '@wick-charts/react';
 
<Tooltip sort='desc'>
  {({ snapshots, time }) => (
    <div>{snapshots[0]?.data.value}</div>
  )}
</Tooltip>

Floating near-cursor glass tooltip that appears while hovering the chart.

Hover-only: without a crosshair position, the component renders null. The companion InfoBar shows last-known values when no hover is active.

Floating glass panel that appears on hover, showing per-series snapshots at the crosshair time. Use the render-prop child to replace the panel contents while keeping the positioned container (with flip/clamp).

Props

sort?TooltipSort

Sort order for line values (default: 'none').

format?default adaptive precision for ohlc/valueTooltipFormatter

Custom formatter for every displayed number in the default UI. Called per row with the field hint ('open' | 'high' | 'low' | 'close' | 'volume' | 'value'). Defaults: adaptive precision for ohlc/value, compact (K/M/B/T) for volume. Ignored when children is a render-prop.

children?(ctx: TooltipRenderContext) => ReactNode

Render-prop escape hatch. Receives the hover snapshots and replaces the built-in panel contents. The floating container (positioning, blur glass, clamping) is preserved — use `computeTooltipPosition` directly if you need your own container.

Render prop

// children: (ctx: TooltipRenderContext) => ReactNode
<Tooltip>
  {({ snapshots, time }) => (
    <div>{snapshots[0]?.data.value}</div>
  )}
</Tooltip>