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

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

# Tooltip

**Type**: component

Tooltip - Display contextual information on hover or focus A versatile tooltip component built on Radix UI primitives that provides contextual information when users hover over or focus on an element. Perfect for displaying help text, definitions, or additional context without cluttering the interface. Automatically wraps content in a TooltipProvider for convenience. The tooltip supports both controlled and uncontrolled usage patterns, with intelligent positioning, collision detection, and smooth animations. Built with accessibility as a priority, including proper ARIA attributes and keyboard navigation support.

## JSX Usage

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

<Tooltip
  defaultOpen={true}
  open={true}
  onOpenChange={handleOpenChange}
  delayDuration={0}
  disableHoverableContent={true}
>
  {/* Your content here */}
</Tooltip>
```

## Component Props

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

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

### onOpenChange
- **Type**: `(open: boolean) => void`
- **Required**: No
- **Description**: No description available

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

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

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

## Examples

### Example 1
```tsx
// Basic tooltip
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Hover me</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>This is a helpful tooltip</p>
  </TooltipContent>
</Tooltip>
```
### Example 2
```tsx
// Icon button with tooltip
import { Info } from "lucide-react"
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="ghost" size="icon">
      <Info className="h-4 w-4" />
    </Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Additional information</p>
  </TooltipContent>
</Tooltip>
```
### Example 3
```tsx
// Controlled tooltip with custom delay
const [open, setOpen] = useState(false)
<Tooltip
  open={open}
  onOpenChange={setOpen}
  delayDuration={300}
>
  <TooltipTrigger asChild>
    <Button onClick={() => setOpen(!open)}>Toggle</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Controlled tooltip state</p>
  </TooltipContent>
</Tooltip>
```
### Example 4
```tsx
// Disabled element with tooltip (requires wrapper)
<Tooltip>
  <TooltipTrigger asChild>
    <span className="inline-block">
      <Button disabled>Disabled Action</Button>
    </span>
  </TooltipTrigger>
  <TooltipContent>
    <p>You need to complete setup first</p>
  </TooltipContent>
</Tooltip>
```
### Example 5
```tsx
// Positioned tooltip with rich content
<Tooltip>
  <TooltipTrigger asChild>
    <Badge variant="secondary">API Key</Badge>
  </TooltipTrigger>
  <TooltipContent side="right" className="max-w-[250px]">
    <div className="space-y-1">
      <p className="font-medium">API Authentication</p>
      <p className="text-xs">Your key is used to authenticate requests</p>
    </div>
  </TooltipContent>
</Tooltip>
```