Hover Card

A floating card that appears when the user hovers over an element.

Source

Installation

npx @rahimstack@latest add hover-card

API Reference

const HoverCardAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-HoverCard__root",
        "z-50 w-64 rounded-md border bg-[--paper] p-4 shadow-sm outline-none",
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
        "data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-95",
        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
    ]),
})