HoverCard

Basic usage

Hovering the trigger opens the panel; the behavior comes from headless (including limitations compared to a full „safe bridge“ between the trigger and panel in some libraries).

tsx

import { HoverCard } from "~/components/ui/base/hover-card";

<HoverCard.Root>
  <HoverCard.Trigger>@user</HoverCard.Trigger>
  <HoverCard.Content>
    <div class="space-y-2 p-4">
      <p class="text-callout font-medium text-label">Profile preview</p>
      <p class="text-caption-1 text-secondary-label">
        Hover Card is built on the headless Popover with the default hover mode — suited for richer content than a Tooltip.
      </p>
    </div>
  </HoverCard.Content>
</HoverCard.Root>

Placement (floating)

Prop floating for the panel direction (e.g. showing above the trigger).

tsx

import { HoverCard } from "~/components/ui/base/hover-card";

<HoverCard.Root floating="top">
  <HoverCard.Trigger>Panel above</HoverCard.Trigger>
  <HoverCard.Content>
    <div class="p-4 text-callout text-secondary-label">Placement via the floating prop on the root.</div>
  </HoverCard.Content>
</HoverCard.Root>

Arrow

Arrow — see the example below.

tsx

import { HoverCard } from "~/components/ui/base/hover-card";

<HoverCard.Root gutter={8} arrow>
  <HoverCard.Trigger>With arrow</HoverCard.Trigger>
  <HoverCard.Content>
    <HoverCard.Arrow />
    <div class="p-4 text-callout text-secondary-label">
      The same Floating UI options as the Popover (<code>arrow</code>, <code>gutter</code>).
    </div>
  </HoverCard.Content>
</HoverCard.Root>

Metadata

Source: meta.generated.json (see npm run generate)

File base/hover-card/meta.generated.json not found or path not allowed.