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

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

# TooltipContent

**Type**: component

TooltipContent - The floating tooltip content container Contains the content displayed in the tooltip popup. Automatically positioned relative to the trigger element with intelligent collision detection to ensure the tooltip stays within the viewport. Includes smooth animations and an arrow pointer for visual connection to the trigger. The content component handles complex positioning logic, including collision detection, viewport boundaries, and responsive positioning. It supports rich content including text, images, and interactive elements while maintaining accessibility standards.

## JSX Usage

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

<TooltipContent
  asChild={true}
  "aria-label"="value"
  onEscapeKeyDown={handleEscapeKeyDown}
  onPointerDownOutside={handlePointerDownOutside}
  forceMount={true}
  side={value}
  sideOffset={0}
  align={value}
  alignOffset={0}
  avoidCollisions={true}
  collisionBoundary={[]}
  collisionPadding={value}
  arrowPadding={0}
  sticky={value}
  hideWhenDetached={true}
  className="value"
>
  {/* Your content here */}
</TooltipContent>
```

## Component Props

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

### "aria-label"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### onEscapeKeyDown
- **Type**: `(event: KeyboardEvent) => void`
- **Required**: No
- **Description**: No description available

### onPointerDownOutside
- **Type**: `(event: PointerEvent) => void`
- **Required**: No
- **Description**: No description available

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

### side
- **Type**: `"top" | "right" | "bottom" | "left"`
- **Required**: No
- **Description**: No description available

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

### align
- **Type**: `"start" | "center" | "end"`
- **Required**: No
- **Description**: No description available

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

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

### collisionBoundary
- **Type**: `Element | Element[]`
- **Required**: No
- **Description**: No description available

### collisionPadding
- **Type**: `| number
    | { top?: number; right?: number; bottom?: number; left?: number }`
- **Required**: No
- **Description**: No description available

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

### sticky
- **Type**: `"partial" | "always"`
- **Required**: No
- **Description**: No description available

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

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

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Simple text tooltip
<TooltipContent>
  <p>This is helpful information</p>
</TooltipContent>
```
### Example 2
```tsx
// Positioned tooltip with custom offset
<TooltipContent
  side="left"
  sideOffset={12}
  align="start"
  alignOffset={-4}
>
  <p>Precisely positioned tooltip</p>
</TooltipContent>
```
### Example 3
```tsx
// Rich content with custom styling
<TooltipContent className="max-w-[320px] p-4">
  <div className="space-y-2">
    <div className="flex items-center gap-2">
      <InfoIcon className="h-4 w-4 text-blue-500" />
      <p className="font-semibold">Pro Feature</p>
    </div>
    <p className="text-sm text-gray-600">
      This feature is available in Pro plans. Upgrade to unlock
      advanced functionality and premium support.
    </p>
    <Button size="sm" className="mt-2">Upgrade Now</Button>
  </div>
</TooltipContent>
```
### Example 4
```tsx
// Tooltip with collision boundary
<TooltipContent
  collisionPadding={{ top: 10, bottom: 10 }}
  hideWhenDetached
  sticky="always"
>
  <p>Stays within safe boundaries</p>
</TooltipContent>
```
### Example 5
```tsx
// Controlled tooltip with escape handling
<TooltipContent
  onEscapeKeyDown={(e) => {
    console.log('Tooltip dismissed with Escape');
    // Custom handling if needed
  }}
  onPointerDownOutside={(e) => {
    console.log('Clicked outside tooltip');
  }}
>
  <p>Interactive tooltip with event handlers</p>
</TooltipContent>
```