HoverCard

HoverCard defines how EnterUI handles a subtle hover and focus information card, including default structure, accessible states, and token-driven styling.

#Default usage

<HoverCard>
  <HoverCardTrigger asChild><Button variant="secondary">EnterUI</Button></HoverCardTrigger>
  <HoverCardContent>
    <div className="docs-preview-stack">
      <strong>EnterUI</strong>
      <span className="docs-preview-muted">Product components built on FroggDesign tokens.</span>
    </div>
  </HoverCardContent>
</HoverCard>

#Import

import {
  Button,
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@froggdesign/enter-ui-react";

#Accessibility

HoverCard uses Radix behavior for pointer and focus interactions. Do not place critical instructions only inside hover content.

#API

• HoverCardContent supports side, alignment, offset, and className.
• HoverCardTrigger supports asChild.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.