Tooltip

Tooltip is the card a chart shows next to the pointer. It has a title, rows of label and value, and an optional description. It sits inside a relative container and stays inside that container's width.

import Tooltip, { type TooltipContent } from "@haloid/azucar/ui/tooltip";

Surface

The surface is not designed yet. The component renders structure and placement only. It has no background, color, radius, shadow, padding, or type size. Charts that use it show plain text until the surface exists.

Placement

x and y are the pointer position relative to the container. boundsWidth is the container's width. The tooltip prefers the right of the pointer. If that does not fit, it uses the left. If neither fits, it clamps inside the bounds. width defaults to 192 and offset to 16.

<div className="relative h-40 w-120">
<Tooltip
  x={24}
  y={8}
  boundsWidth={480}
  content={{
    title: "Step A",
    rows: [
      { label: "Count", value: "12" },
      { label: "Change", value: "−140" },
    ],
    description: "What this step accounts for.",
  }}
/>
</div>

Content

TooltipContent is { title, rows?, description? }. A row is { label, value, color? }. A color renders a swatch before the label. WaterfallChart builds this content in getTooltipContent.