@neynar/ui/llm-docs/chart-tooltip.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# ChartTooltip

**Type**: component

Tooltip component for charts Re-export of Recharts Tooltip component with support for custom content. Use with ChartTooltipContent for consistent styling and theming integration.

## JSX Usage

```jsx
import { ChartTooltip } from '@neynar/ui';

<ChartTooltip
  content={value}
  active={true}
  payload={[]}
  label={value}
  formatter={() => {}}
  labelFormatter={[]}
  cursor={value}
  position={value}
  offset={0}
  shared={true}
  portal={value}
  wrapperStyle={value}
  wrapperClassName="value"
  animationDuration={0}
  animationEasing="value"
  allowEscapeViewBox={value}
  separator="value"
  useTranslate3d={true}
  coordinate={value}
  filterNull={true}
  itemSorter={() => {}}
  itemStyle={value}
  labelStyle={value}
  contentStyle={value}
/>
```

## Component Props

### content
- **Type**: `React.ComponentType<any> | React.ReactElement`
- **Required**: No
- **Description**: No description available

### active
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### payload
- **Type**: `any[]`
- **Required**: No
- **Description**: No description available

### label
- **Type**: `string | number`
- **Required**: No
- **Description**: No description available

### formatter
- **Type**: `(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    value: any,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    name: any,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    props: any,
  ) => [React.ReactNode, React.ReactNode] | React.ReactNode`
- **Required**: No
- **Description**: No description available

### labelFormatter
- **Type**: `(label: any, payload: any[]) => React.ReactNode`
- **Required**: No
- **Description**: No description available

### cursor
- **Type**: `boolean | React.ComponentType<any> | React.ReactElement | object`
- **Required**: No
- **Description**: No description available

### position
- **Type**: `{ x?: number; y?: number }`
- **Required**: No
- **Description**: No description available

### offset
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### shared
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### portal
- **Type**: `HTMLElement`
- **Required**: No
- **Description**: No description available

### wrapperStyle
- **Type**: `React.CSSProperties`
- **Required**: No
- **Description**: No description available

### wrapperClassName
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### animationDuration
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### animationEasing
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### allowEscapeViewBox
- **Type**: `{ x?: boolean; y?: boolean }`
- **Required**: No
- **Description**: No description available

### separator
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### useTranslate3d
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### coordinate
- **Type**: `{ x?: number; y?: number }`
- **Required**: No
- **Description**: No description available

### filterNull
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### itemSorter
- **Type**: `(item: any) => number`
- **Required**: No
- **Description**: No description available

### itemStyle
- **Type**: `React.CSSProperties`
- **Required**: No
- **Description**: No description available

### labelStyle
- **Type**: `React.CSSProperties`
- **Required**: No
- **Description**: No description available

### contentStyle
- **Type**: `React.CSSProperties`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic tooltip
<ChartTooltip content={<ChartTooltipContent />} />
```
### Example 2
```tsx
// Tooltip with custom positioning
<ChartTooltip
  content={<ChartTooltipContent />}
  cursor={false}
  position={{ x: 10, y: 10 }}
/>
```