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

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

# HoverCardTrigger

**Type**: component

HoverCardTrigger - Interactive element that activates the hover card on mouse hover The trigger component that users hover over to reveal the hover card content. Can wrap any element or render as its child using the asChild prop. Automatically manages hover detection and integrates with the parent HoverCard's timing configuration. When using asChild, the trigger merges its props with the immediate child element, allowing for seamless integration with buttons, links, or any other interactive elements.

## JSX Usage

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

<HoverCardTrigger
  asChild={true}
  className="value"
>
  {/* Your content here */}
</HoverCardTrigger>
```

## Component Props

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

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

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

## Examples

### Example 1
```tsx
// Basic trigger with text
<HoverCardTrigger>
  <span className="text-blue-600 cursor-pointer">Hover for details</span>
</HoverCardTrigger>
```
### Example 2
```tsx
// Using asChild with a button
<HoverCardTrigger asChild>
  <Button variant="outline">User Profile</Button>
</HoverCardTrigger>
```
### Example 3
```tsx
// With a link element
<HoverCardTrigger asChild>
  <a href="/profile/john" className="font-medium hover:underline">
### Example 4
```tsx
// Complex trigger with icon
<HoverCardTrigger className="inline-flex items-center gap-2">
  <UserIcon className="h-4 w-4" />
  <span>View Profile</span>
</HoverCardTrigger>
```