reopt designreopt design
DocsExploreToolsPricingBuilder
Start
Overview
Start
Core Concepts
Core Concepts
데이터 모델
데이터 모델
Build & Operate
Production readiness
opt-charts · Charts
ChartContainer
ChartTooltip
ChartLegend
LineChart
BarChart
AreaChart
Sparkline
PieChart
ScatterChart
ComparisonChart
GaugeChart
FunnelChart
RetentionHeatmap
SankeyChart
CalendarHeatmap
WaterfallChart
BubbleChart
MetricsCard
TrendChart
EventSparkline
ReportWidget
Oopt-charts
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

ChartTooltip

visual

opt-ui 스타일의 차트 툴팁. Recharts Tooltip의 content prop으로 사용됩니다.

100%

Default Tooltip

마우스를 차트 위로 올려 툴팁을 확인하세요. opt-charts 컴포넌트는 기본적으로 reopt 스타일 툴팁을 사용합니다.

Custom Value Formatter

ChartTooltipContent Component

Standalone Preview

March

Sales:5000
Profit:2800

With Value Formatter

March

Revenue:$5,000
Expenses:$2,200

테스트 커버리지

2026년 2월 4일

생성된 테스트 결과를 찾지 못했습니다.

ChartTooltipContent 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

ChartTooltipContent Props

Prop타입기본값설명
activeboolean—툴팁 활성화 상태 (Recharts 자동 전달)
payloadarray—데이터 포인트 배열 (Recharts 자동 전달)
labelReactNode—X축 레이블
labelFormatter(label: ReactNode) => ReactNode—레이블 포맷터 함수
valueFormatter(value: TooltipValueType, name: string | number) => ReactNode—값 포맷터 함수
hideLabelbooleanfalse레이블 숨김 여부

Import

tsx
import { ChartTooltipContent, createChartTooltip } from "@reopt-ai/opt-ui";