@neynar/ui/llm-docs/hover-card-content.llm.md

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

# HoverCardContent

**Type**: component

HoverCardContent - Floating content container with intelligent positioning and animations The content area that appears when the trigger is hovered. Features built-in animations, intelligent positioning to avoid viewport boundaries, and customizable alignment options. Automatically portaled to prevent z-index and overflow issues, with smooth fade and scale transitions that respect user motion preferences. The content supports rich layouts including text, images, buttons, and complex components. Positioning is automatically calculated based on available space, with collision detection to ensure the content remains visible within the viewport.

## JSX Usage

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

<HoverCardContent
  side={value}
  sideOffset={0}
  align={value}
  alignOffset={0}
  avoidCollisions={true}
  collisionBoundary={value}
  collisionPadding={value}
  sticky={value}
  hideWhenDetached={true}
  forceMount={value}
  asChild={true}
  className="value"
>
  {/* Your content here */}
</HoverCardContent>
```

## Component Props

### 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 | null | Array<Element | null>`
- **Required**: No
- **Description**: No description available

### collisionPadding
- **Type**: `| number
    | Partial<Record<"top" | "right" | "bottom" | "left", 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

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

### asChild
- **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 content
<HoverCardContent>
  <p>This is a simple hover card with text content.</p>
</HoverCardContent>
```
### Example 2
```tsx
// Positioned above the trigger with custom alignment
<HoverCardContent side="top" align="start" sideOffset={8}>
  <div className="text-sm">
    Content appears above the trigger, aligned to the start edge
  </div>
</HoverCardContent>
```
### Example 3
```tsx
// Rich content with custom width and complex layout
<HoverCardContent className="w-80">
  <div className="space-y-3">
    <div className="flex items-center gap-3">
      <Avatar className="h-12 w-12">
        <AvatarImage src="/avatar.jpg" />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      <div>
        <h4 className="font-semibold">John Doe</h4>
        <p className="text-sm text-muted-foreground">Software Engineer</p>
      </div>
    </div>
    <Separator />
    <div className="grid grid-cols-2 gap-4 text-sm">
      <div>
        <p className="font-medium">Repositories</p>
        <p className="text-muted-foreground">42</p>
      </div>
      <div>
        <p className="font-medium">Followers</p>
        <p className="text-muted-foreground">1.2k</p>
      </div>
    </div>
  </div>
</HoverCardContent>
```
### Example 4
```tsx
// Interactive content with buttons
<HoverCardContent>
  <div className="space-y-3">
    <h4 className="font-semibold">Quick Actions</h4>
    <div className="flex flex-col gap-2">
      <Button size="sm" variant="ghost" className="justify-start">
        <EditIcon className="mr-2 h-4 w-4" />
        Edit Details
      </Button>
      <Button size="sm" variant="ghost" className="justify-start">
        <ShareIcon className="mr-2 h-4 w-4" />
        Share Profile
      </Button>
      <Button size="sm" variant="ghost" className="justify-start">
        <SettingsIcon className="mr-2 h-4 w-4" />
        Settings
      </Button>
    </div>
  </div>
</HoverCardContent>
```