Hover Card

For sighted users to preview content available behind a link.

import { Button } from "@smartacteam/ambient-web/button";
import { HoverCard } from "@smartacteam/ambient-web/hover-card";

export function HoverCardDemo() {
  return (
    <HoverCard.Root>
      <HoverCard.Trigger
        delay={100}
        closeDelay={100}
        render={<Button variant="text">Hover Here</Button>}
      />
      <HoverCard.Content className="flex w-64 flex-col gap-0.5 text-sm">
        <div className="font-semibold">@nextjs</div>
        <div>The React Framework – created and maintained by @vercel.</div>
        <div className="mt-1 text-xs text-foreground-secondary">
          Joined December 2021
        </div>
      </HoverCard.Content>
    </HoverCard.Root>
  );
}

Usage

import { HoverCard } from "@smartacteam/ambient-web/hover-card";

<HoverCard.Root>
  <HoverCard.Trigger>Hover</HoverCard.Trigger>
  <HoverCard.Content>
    Ambient UI Design System
  </HoverCard.Content>
</HoverCard.Root>

Trigger Delays

Use delay and closeDelay on the trigger to control when the card opens and closes.

<HoverCard.Root>
  <HoverCard.Trigger delay={100} closeDelay={200}>
    Hover
  </HoverCard.Trigger>
  <HoverCard.Content>Content</HoverCard.Content>
</HoverCard.Root>

Positioning

Use the side and align props on <HoverCard.Content /> to control placement.

<HoverCard.Root>
  <HoverCard.Trigger>Hover</HoverCard.Trigger>
  <HoverCard.Content side="top" align="start">
    Content
  </HoverCard.Content>
</HoverCard.Root>