HoverCard

A richer, interactive alternative to Tooltip — opens on hover/focus after a delay and stays open while you move the pointer into the card. Content is fully interactive (links, buttons). Renders with role="dialog".

Features

Example

import { HoverCard } from '@wire-ui/react'
 
<HoverCard.Root>
<HoverCard.Trigger>@wire-ui</HoverCard.Trigger>
<HoverCard.Content side="bottom">
Headless, AI-native component primitives with zero CSS.
</HoverCard.Content>
</HoverCard.Root>

import { HoverCard } from '@wire-ui/react'
 
<HoverCard.Root openDelay={150}>
  <HoverCard.Trigger className="cursor-pointer font-medium text-black underline underline-offset-2">
    @grace
  </HoverCard.Trigger>
  <HoverCard.Content
    side="top"
    sideOffset={8}
    className="w-64 rounded-[8px] border border-black bg-white p-4 text-sm shadow-[4px_4px_0_0_#000]"
  >
    <p className="font-semibold text-black">Grace Hopper</p>
    <p className="text-xs text-[#6b7280]">@grace · Staff Engineer</p>
    <button className="mt-3 w-full rounded-[8px] border border-black bg-black py-1.5 text-xs font-medium text-white hover:bg-white hover:text-black">
      Follow
    </button>
  </HoverCard.Content>
</HoverCard.Root>

Styling

Trigger and Content set data-state ("open" / "closed"); Content also sets data-side. Use these to drive enter/exit transitions and side-specific styling. Content is absolutely positioned relative to the Root (an inline-block wrapper) and given z-index: 50.

<HoverCard.Content className="
  opacity-0 transition-opacity
  data-[state=open]:opacity-100
  data-[side=top]:origin-bottom
  data-[side=bottom]:origin-top
">
  …
</HoverCard.Content>

Using data attributes

/* Animate based on open/closed state */
[data-state="open"]   { opacity: 1; }
[data-state="closed"] { opacity: 0; }
 
/* Side-specific transform origin */
[data-side="top"]    { transform-origin: bottom center; }
[data-side="bottom"] { transform-origin: top center; }

Root props

Trigger props

The Trigger renders a <span> and accepts all standard <span> HTML attributes. It manages onMouseEnter, onMouseLeave, onFocus, and onBlur internally (your handlers are still called).

Content props

Content also accepts all standard <div> HTML attributes.

Data attributes

Content sets role="dialog".

Accessibility

• Content renders with role="dialog".
• Opens immediately on Trigger focus and closes on blur, so keyboard users can reach interactive content inside the card.
• Pointer users can move from the Trigger into the Content without it closing — the close timer is cancelled while hovering the card.

Keyboard Interactions