# Hover card

Host: Radix UI. Path: keyframes. Preset: `scale-fade`. Built against [radix-ui 1.6.7](https://www.npmjs.com/package/radix-ui/v/1.6.7).

Opens on intent. The exit matters more here than anywhere, because pointer-driven surfaces close constantly.

The page this file mirrors mounts the component twice, once with the attribute and once without, so the only difference between the two is the library.

Upstream documentation: [Radix UI documentation](https://www.radix-ui.com/primitives/docs/components/hover-card)

Only in Radix UI. No other host here implements this component.

## Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

```text
HoverCard.Root
  HoverCard.Trigger
  HoverCard.Portal
    HoverCard.Content  data-motion="scale-fade"
```

## How the match works

| Step | Value |
| --- | --- |
| host writes | `data-state, data-side` |
| easeful matches | `[data-motion~="scale-fade"][data-state="closed"]` |
| what runs | `animation: motion-exit 150ms` |
| you write | `<HoverCard.Content data-motion="scale-fade" />` |

## Every value that works here

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

| Value | Link |
| --- | --- |
| `scale-fade` | the default |
| `fade` | [fade](/radix/hover-card#motion=fade) |
| `slide-up` | [slide-up](/radix/hover-card#motion=slide-up) |
| `fade slide-up` | [fade slide-up](/radix/hover-card#motion=fade%20slide-up) |
| `scale-fade slide-up` | [scale-fade slide-up](/radix/hover-card#motion=scale-fade%20slide-up) |

## Source

`apps/docs/components/demos/radix/hover-card.tsx`

```tsx
"use client"

import { HoverCard } from "radix-ui"
import type { DemoProps } from "@/components/demos/props"

export function RadixHoverCard({ motion }: DemoProps) {
  return (
    <HoverCard.Root openDelay={120}>
      <HoverCard.Trigger className="btn">Hover me</HoverCard.Trigger>
      <HoverCard.Portal>
        <HoverCard.Content className="panel" sideOffset={10} collisionPadding={16} data-motion={motion}>
          <p className="panel__title">Hover card</p>
          <p className="panel__body">Opens on intent rather than on click, same state pair.</p>
        </HoverCard.Content>
      </HoverCard.Portal>
    </HoverCard.Root>
  )
}
```