Radix UIKeyframes

Hover card

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

Only in Radix UI

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.

withoutno attribute

Hover me

with easefuldata-motion="scale-fade"

Hover me

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" />

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.

HoverCard.Root
HoverCard.Trigger
HoverCard.Portal
HoverCard.Contentdata-motion="scale-fade"

Source

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

18 lines

"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>
  )
}

The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.