> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Hover Card

> A card that appears when hovering over a trigger — ideal for user profile previews, link previews, and supplementary details.

## Overview

<div style={{padding:"28px 24px",background:"#f9fafb",borderRadius:"12px",border:"1px solid #e5e7eb",display:"flex",justifyContent:"center"}}>
  <div style={{display:"flex",flexDirection:"column",gap:"8px",fontFamily:"Inter,sans-serif",alignItems:"flex-start"}}>
    <a href="#" style={{fontSize:"14px",color:"#0479CE",textDecoration:"underline",cursor:"pointer"}}>@badrinteractive</a>

    <div style={{background:"#fff",border:"1px solid #E5E7EB",borderRadius:"12px",boxShadow:"0 4px 16px rgba(0,0,0,0.1)",padding:"16px",width:"260px"}}>
      <div style={{display:"flex",alignItems:"center",gap:"10px",marginBottom:"10px"}}>
        <div style={{width:"40px",height:"40px",borderRadius:"50%",background:"linear-gradient(135deg,#0479CE,#CDE4F5)",display:"flex",alignItems:"center",justifyContent:"center",color:"#fff",fontSize:"16px",fontWeight:600,flexShrink:0}}>B</div>

        <div>
          <div style={{fontSize:"14px",fontWeight:600,color:"#101828"}}>Badr Interactive</div>
          <div style={{fontSize:"12px",color:"#667085"}}>@badrinteractive</div>
        </div>
      </div>

      <div style={{fontSize:"13px",color:"#344054",marginBottom:"10px",lineHeight:1.5}}>Designing and building the A'raf Design System. Jakarta, Indonesia 🇮🇩</div>

      <div style={{display:"flex",gap:"16px",fontSize:"12px",color:"#667085"}}>
        <span><strong style={{color:"#101828"}}>128</strong> following</span>
        <span><strong style={{color:"#101828"}}>4.2k</strong> followers</span>
      </div>
    </div>
  </div>
</div>

**Hover Card** reveals supplementary content when the user hovers over a trigger element. Unlike `Tooltip` (text-only, immediate), Hover Card supports rich content and has a short open delay — ideal for user avatars, social handles, and link previews.

***

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @araf-ds/core
  ```

  ```bash yarn theme={null}
  yarn add @araf-ds/core
  ```

  ```bash pnpm theme={null}
  pnpm add @araf-ds/core
  ```
</CodeGroup>

***

## Usage

```tsx theme={null}
import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} from "@araf-ds/core"

export default function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <a href="#" className="text-primary underline">@badrinteractive</a>
      </HoverCardTrigger>
      <HoverCardContent className="w-64">
        <div className="flex gap-3">
          <Avatar src="/avatar.jpg" fallback="B" />
          <div>
            <h4 className="text-sm font-semibold">Badr Interactive</h4>
            <p className="text-xs text-muted-foreground">@badrinteractive</p>
            <p className="text-sm mt-1">
              Designing A'raf Design System. Jakarta 🇮🇩
            </p>
            <div className="flex gap-4 text-xs text-muted-foreground mt-2">
              <span><strong>128</strong> following</span>
              <span><strong>4.2k</strong> followers</span>
            </div>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}
```

***

## Variants

### User Profile Preview

```tsx theme={null}
<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="link">@badrinteractive</Button>
  </HoverCardTrigger>
  <HoverCardContent side="bottom" align="start" className="w-64">
    <div className="flex gap-3">
      <Avatar src={user.avatar} fallback={user.initials} size="md" />
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">{user.name}</h4>
        <p className="text-xs text-muted-foreground">@{user.handle}</p>
        <p className="text-sm">{user.bio}</p>
        <div className="flex gap-3 text-xs text-muted-foreground pt-1">
          <span><strong>{user.following}</strong> following</span>
          <span><strong>{user.followers}</strong> followers</span>
        </div>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>
```

### Link Preview

```tsx theme={null}
<HoverCard openDelay={300}>
  <HoverCardTrigger asChild>
    <a href="https://mintlify.com" target="_blank" className="underline">
      Mintlify docs
    </a>
  </HoverCardTrigger>
  <HoverCardContent className="w-72">
    <div className="space-y-2">
      <div className="aspect-video bg-muted rounded-md overflow-hidden">
        <img src="/og-preview.png" alt="Mintlify" className="w-full h-full object-cover" />
      </div>
      <h4 className="text-sm font-semibold">Mintlify – Beautiful Docs</h4>
      <p className="text-xs text-muted-foreground">
        The documentation platform built for developers.
      </p>
      <p className="text-xs text-muted-foreground">mintlify.com</p>
    </div>
  </HoverCardContent>
</HoverCard>
```

***

## API Reference

### HoverCard

<ParamField path="open" type="boolean">
  Controlled open state.
</ParamField>

<ParamField path="onOpenChange" type="(open: boolean) => void">
  Callback when open state changes.
</ParamField>

<ParamField path="openDelay" type="number" default="700">
  Milliseconds before the card opens after hover starts.
</ParamField>

<ParamField path="closeDelay" type="number" default="300">
  Milliseconds before the card closes after hover ends.
</ParamField>

### HoverCardContent

<ParamField path="side" type="string" default="bottom">
  Which side of the trigger to render on. Values: `top` · `right` · `bottom` · `left`
</ParamField>

<ParamField path="align" type="string" default="center">
  Alignment relative to the trigger. Values: `start` · `center` · `end`
</ParamField>

<ParamField path="sideOffset" type="number" default="4">
  Distance in px between trigger and card.
</ParamField>

***

## Accessibility

* Hover Card is purely supplementary — all content inside must also be accessible without hovering
* It is not keyboard accessible by default (hover only) — consider adding a `focus` trigger for keyboard users
* Never put interactive elements (buttons, links) inside a Hover Card — use `Popover` for that
* Screen readers ignore Hover Card content — do not put essential information in it

***

## Do's & Don'ts

<CardGroup cols={2}>
  <Card title="Do" icon="check" iconType="solid" color="#16A34A">
    * Use for supplementary previews: user profiles, link previews, tag definitions
    * Set an appropriate `openDelay` (300–700ms) to avoid accidental triggers
    * Keep content concise — Hover Card is a preview, not a full detail page
    * Use `side="bottom"` (default) for inline text triggers
  </Card>

  <Card title="Don't" icon="xmark" iconType="solid" color="#DC2626">
    * Don't put interactive elements (buttons, forms) inside — use `Popover`
    * Don't rely on Hover Card for essential information — hover is not available on touch devices
    * Don't use on mobile-primary experiences — hover doesn't exist on touchscreens
    * Don't set `openDelay={0}` — it triggers too easily on mouse movement
  </Card>
</CardGroup>