Hover Card

# Hover Card

```astro
---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";
---

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="outline">@starwind</Button>
  </HoverCardTrigger>
  <HoverCardContent class="w-80" align="start">
    <div class="flex justify-between gap-4">
      <Avatar class="shrink-0">
        <AvatarImage src="https://i.pravatar.cc/150?u=starwind" alt="Starwind UI" />
        <AvatarFallback>SW</AvatarFallback>
      </Avatar>
      <div class="space-y-1">
        <h4 class="text-sm font-semibold">Starwind UI</h4>
        <p class="text-muted-foreground text-sm">
          Accessible Astro components styled with Tailwind CSS.
        </p>
        <span class="text-muted-foreground block pt-2 text-xs">Built for Astro developers</span>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>
```

## Installation

```bash
npx starwind@latest add hover-card
```

## Usage

### General Notes

Hover Card shows additional context when a trigger is hovered or focused, without forcing a click.

The essential components are `HoverCard`, `HoverCardTrigger`, and `HoverCardContent`.

### Profile Preview

Use `asChild` on the trigger when you want to reuse an existing interactive component like `Button`.

```astro
---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";
---

<div class="flex flex-wrap items-center gap-4">
  <HoverCard>
    <HoverCardTrigger asChild>
      <Button variant="outline">@starwind</Button>
    </HoverCardTrigger>
    <HoverCardContent align="start" class="w-80">
      <div class="flex justify-between gap-4">
        <Avatar class="shrink-0">
          <AvatarImage src="https://i.pravatar.cc/150?u=starwind" alt="Starwind UI" />
          <AvatarFallback>SW</AvatarFallback>
        </Avatar>
        <div class="space-y-1">
          <h4 class="text-sm font-semibold">Starwind UI</h4>
          <p class="text-muted-foreground text-sm">
            Accessible Astro components styled with Tailwind CSS.
          </p>
          <div class="flex items-center pt-2">
            <span class="text-muted-foreground text-xs">Built for Astro developers</span>
          </div>
        </div>
      </div>
    </HoverCardContent>
  </HoverCard>

  <HoverCard openDelay={200} closeDelay={200}>
    <HoverCardTrigger asChild>
      <Button href="https://astro.build" variant="ghost">Astro</Button>
    </HoverCardTrigger>
    <HoverCardContent side="right" align="start" class="w-80">
      <div class="space-y-2">
        <h4 class="text-sm font-semibold">Astro</h4>
        <p class="text-muted-foreground text-sm">
          A web framework for content-driven sites with fast-by-default performance.
        </p>
      </div>
    </HoverCardContent>
  </HoverCard>
</div>
```

### Side and Alignment

Use `side`, `align`, and `sideOffset` on `HoverCardContent` to control placement.

```astro
---
import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";
---

<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <HoverCard openDelay={150}>
    <HoverCardTrigger asChild>
      <Button variant="outline" class="w-full">Top</Button>
    </HoverCardTrigger>
    <HoverCardContent side="top" sideOffset={8}>Appears above the trigger.</HoverCardContent>
  </HoverCard>

  <HoverCard openDelay={150}>
    <HoverCardTrigger asChild>
      <Button variant="outline" class="w-full">Right</Button>
    </HoverCardTrigger>
    <HoverCardContent side="right" align="start" sideOffset={8}>
      Appears to the right and aligns to the start.
    </HoverCardContent>
  </HoverCard>

  <HoverCard openDelay={150}>
    <HoverCardTrigger asChild>
      <Button variant="outline" class="w-full">Bottom</Button>
    </HoverCardTrigger>
    <HoverCardContent side="bottom" align="end" sideOffset={8}>
      Appears below and aligns to the end.
    </HoverCardContent>
  </HoverCard>

  <HoverCard openDelay={150}>
    <HoverCardTrigger asChild>
      <Button variant="outline" class="w-full">Left</Button>
    </HoverCardTrigger>
    <HoverCardContent side="left" sideOffset={8}>Appears to the left.</HoverCardContent>
  </HoverCard>
</div>
```

### Non-hoverable Content

By default, moving the pointer from trigger to content keeps the card open. Set `disableHoverableContent` to close immediately when leaving the trigger.

```astro
---
import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";
---

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="outline">Hoverable content (default)</Button>
  </HoverCardTrigger>
  <HoverCardContent class="max-w-[220px]">
    You can move your pointer into this card without closing it.
  </HoverCardContent>
</HoverCard>

<HoverCard disableHoverableContent>
  <HoverCardTrigger asChild>
    <Button variant="outline">Trigger-only hover</Button>
  </HoverCardTrigger>
  <HoverCardContent class="max-w-[220px]">
    This card closes when the pointer leaves the trigger.
  </HoverCardContent>
</HoverCard>
```

## API Reference

### HoverCard

The root component that manages open/close timing and hover behavior.

| Prop | Type | Default |
|------|------|---------|
| `openDelay` | `number` | `700` |
| `closeDelay` | `number` | `300` |
| `disableHoverableContent` | `boolean` | `false` |
| `class` | `string` | - |

```astro
<HoverCard openDelay={200} closeDelay={200}>
  <!-- HoverCard components -->
</HoverCard>
```

**Additional Notes:**
- `openDelay`: Delay in milliseconds before opening on pointer hover
- `closeDelay`: Delay in milliseconds before closing after leaving the trigger/content area
- `disableHoverableContent`: Prevents content hover from keeping the card open

### HoverCardTrigger

The interactive element that opens the hover card.

| Prop | Type | Default |
|------|------|---------|
| `asChild` | `boolean` | `false` |
| `class` | `string` | - |

```astro
<HoverCardTrigger asChild>
  <Button variant="outline">@starwind</Button>
</HoverCardTrigger>
```

**Additional Notes:**
- `asChild`: Renders the child element as the trigger instead of rendering a native `button`

### HoverCardContent

The floating panel that displays contextual content.

| Prop | Type | Default |
|------|------|---------|
| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` |
| `align` | `"start" \| "center" \| "end"` | `"center"` |
| `sideOffset` | `number` | `4` |
| `avoidCollisions` | `boolean` | `true` |
| `animationDuration` | `number` | `100` |
| `class` | `string` | - |

```astro
<HoverCardContent side="right" align="start" sideOffset={8}>
  Hover card content
</HoverCardContent>
```

**Additional Notes:**
- `side`: Preferred side relative to the trigger
- `align`: Alignment against the trigger on the chosen side
- `sideOffset`: Distance in pixels from the trigger
- `avoidCollisions`: Repositions the card to keep it in the viewport when needed
- `animationDuration`: Open and close animation duration in milliseconds