Tooltip

Contextual data overlays for chart interactions. Works with all chart types.

Default

January

186

app/tooltip-demo.tsx

import { ChartTooltip } from "@/components/ui/chart-tooltip";

export function DefaultTooltip() {
  return (
    <ChartTooltip
      label="January"
      value={186}
      color="#2563eb"
    />
  );
}

Installation

npx @aniui/cli add chart-tooltip

Custom Content

Multi-item tooltip with color indicators.

January 2024

Desktop186

Mobile120

import { ChartTooltip } from "@/components/ui/chart-tooltip";

export function CustomTooltip() {
  return (
    <ChartTooltip
      label="January 2024"
      items={[
        { label: "Desktop", value: 186, color: "#2563eb" },
        { label: "Mobile", value: 120, color: "#f97316" },
      ]}
    />
  );
}

Indicator Line

Vertical line indicator instead of dots.

Revenue

Current$1,234

Previous$987

import { ChartTooltip } from "@/components/ui/chart-tooltip";

// Use indicator="line" for a vertical bar indicator
export function IndicatorTooltip() {
  return (
    <ChartTooltip
      label="Revenue"
      indicator="line"
      items={[
        { label: "Current", value: "$1,234", color: "#2563eb" },
        { label: "Previous", value: "$987", color: "#f97316" },
      ]}
    />
  );
}

Animated

Smooth fade and slide entrance animation.

March

237

import { ChartTooltip } from "@/components/ui/chart-tooltip";

// Animate with Reanimated entering/exiting
// transitions when showing/hiding
export function AnimatedTooltip() {
  return <ChartTooltip label="March" value={237} color="#8b5cf6" />;
}

Styled

Fully custom styled tooltip with primary background.

Revenue$4,890+12.5% from last month

import { ChartTooltip } from "@/components/ui/chart-tooltip";

// Override styles with className prop
export function StyledTooltip() {
  return (
    <ChartTooltip
      className="bg-primary border-primary"
      label="Revenue"
      value="$4,890"
      color="#fff"
    />
  );
}

With Formatter

Custom value formatting and dashed indicators.

Sales Report

Units1,234 pcs

Revenue$12.3K

import { ChartTooltip } from "@/components/ui/chart-tooltip";

// Use indicator="dashed" for a muted indicator style
export function FormatterTooltip() {
  return (
    <ChartTooltip
      label="Sales Report"
      indicator="dashed"
      items={[
        { label: "Units", value: "1,234 pcs", color: "#2563eb" },
        { label: "Revenue", value: "$12.3K", color: "#f97316" },
      ]}
    />
  );
}

Props

PropTypeDefault

label

string

—

value

string | number

—

color

string

"#000"

indicator

"dot" | "line" | "dashed"

"dot"

items

{ label, value, color }[]

—

className

string

—

PreviousRadial Chart