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>
    <VStack align="stretch" gap={12} fullWidth>
      <strong>EnterUI</strong>
      <Text as="span" tone="muted">Product components built on FroggDesign tokens.</Text>
    </VStack>
  </HoverCardContent>
</HoverCard>

#Import

import { Button, HoverCard, HoverCardContent, HoverCardTrigger, Text, VStack } 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.