Hover Card

A heavier Tooltip: the same popover="manual" and useFloatingPosition mechanism, but for richer, often interactive content, so opening and closing are deliberate rather than instant. A real delay before showing gives a passing pointer room to not trigger it, and a matching delay before hiding gives the pointer time to travel from the trigger into the card itself. Focus shows it immediately, a keyboard user tabbing to the trigger shouldn't have to wait out a mouse-tuned delay.interestfor is declared on the trigger too, as a forward-looking, purely additive enhancement for the emerging native hover-intent API.

import { Avatar, HoverCard } from "@kernelui/react";

function AuthorLink() {
  return (
    <HoverCard
      render={<a href="https://github.com/karlkoch">@karlkoch</a>}
      content={
        <div style={{ display: "flex", gap: "0.75rem" }}>
          <Avatar fallback="KK" />
          <div>
            <div style={{ fontWeight: 600 }}>Karl Koch</div>
            <div>Designs and builds Kernel UI.</div>
          </div>
        </div>
      }
    />
  );
}

Props

Accessibility

• The trigger gets aria-describedby pointing at the card, same as Tooltip.
• Focus opens the card without the hover delay, so keyboard users aren't penalized for not having a mouse.
• The card stays open while the pointer is over it, so its content (a link, say) is actually reachable rather than closing the instant the pointer leaves the trigger.
• popover="manual" keeps native top-layer stacking and doesn't fight the custom hover timing the way popover="auto"'s light-dismiss would.