Chart Tooltip

import {
  ChartTooltipCard,
  clampTooltipPosition,
  useMeasuredSize,
  type ChartTooltipRow,
} from '@epilot/spark-ui/chart'

function HoverTip({
  anchorX,
  anchorY,
  width,
  height,
  rows,
}: {
  anchorX: number
  anchorY: number
  width: number
  height: number
  rows: ChartTooltipRow[]
}) {
  const [tipRef, tipSize] = useMeasuredSize<HTMLDivElement>()
  const pos = clampTooltipPosition({
    anchorX,
    anchorY,
    width,
    height,
    tipWidth: tipSize.width,
    tipHeight: tipSize.height,
    placement: 'beside',
  })

  return (
    <div
      ref={tipRef}
      className="pointer-events-none absolute"
      style={{ left: pos.left, top: pos.top }}
    >
      <ChartTooltipCard label="14:00" rows={rows} />
    </div>
  )
}