Askr
UI & Components

Hover Card

Use hover card with the current published Askr packages.

  • @askrjs/ui/hover-card0.0.13
  • @askrjs/themes/hover-card0.0.13

How to use hover card

Hover Card should use the standard themed surface unless the application is deliberately implementing its own design system on top of @askrjs/ui.

  1. Import the themed component from @askrjs/themes/components; use @askrjs/ui directly only when building a custom visual system.
  2. Keep hover card labels, state, and application actions visible at the call site instead of styling internal DOM nodes.
  3. Verify keyboard behavior, focus movement or return, disabled state, and both standard themes.
import { Button, Popover, PopoverContent, PopoverTrigger } from '@askrjs/themes/components';

<Popover>
  <PopoverTrigger asChild><Button variant="outline">Filters</Button></PopoverTrigger>
  <PopoverContent><ProjectFilters /></PopoverContent>
</Popover>

Purpose

Hover Card shows a floating preview when the user hovers a trigger — a user avatar revealing a profile summary, a link showing a preview of its destination — without requiring a click. It's for supplementary context, not primary interaction, since anything hover-only is invisible to touch and keyboard users unless they also have another way to reach the same content.

Install and import

Import from `@askrjs/ui/hover-card` for behavior and `@askrjs/themes/hover-card` for the styled version; both are real subpaths in their packages. As with the other overlays, the pieces are also available from each package's root export.

Live examples

`HoverCard` wraps a `HoverCardTrigger` and a `HoverCardPortal` containing `HoverCardContent`; there's no separate close button component, since dismissal is driven by the pointer leaving rather than an explicit action. Tune `openDelay` and `closeDelay` on the root to avoid the card flickering open on quick mouse passes.

Anatomy

The tree is `HoverCard` > `HoverCardTrigger` and `HoverCardPortal` > `HoverCardContent` — deliberately the smallest of the overlay primitives, since it doesn't need an overlay backdrop, a title/description pair, or a close affordance the way Dialog and Alert Dialog do.

State model

Open state is `open`/`defaultOpen`/`onOpenChange`, same shape as the other overlays, plus two hover-specific timing props: `openDelay` and `closeDelay`, both numbers in milliseconds. Those delays exist because hover intent is noisy — without them, every incidental mouse pass over the trigger would pop the card open.

Keyboard and accessibility

There's no dedicated a11y contract exported for Hover Card the way there is for Dialog and Popover — it's a hover-triggered convenience, not a primary interactive surface. Because keyboard and touch users can't hover, don't put anything in `HoverCardContent` that a user needs to complete their task; if the content matters, surface it through a click-triggered Popover as well.

Styling and tokens

The themed `hover-card.css` styles the content panel much like Popover's — it inherits the same anchored-positioning approach via `side`/`align`/`sideOffset` on `HoverCardContent`, so overrides you've already made to popover positioning tokens carry the same visual language over.

API

`HoverCard` takes `open`, `defaultOpen`, `onOpenChange`, `openDelay`, and `closeDelay`. `HoverCardContent` adds `forceMount`, `side`, `align`, and `sideOffset` on top of div props. `HoverCardTrigger` is button-like with `onPress`/`disabled`; note it renders as a real `<button>` by default even though the interaction is hover-driven, so give it `asChild` if you need to trigger from a link or inline text instead.

Edge cases

Fast mouse movement across multiple triggers in a row can cause hover cards to flicker between open and closed if `closeDelay` is too short — bump it up when triggers are dense, like a list of avatars. Since there's no built-in focus trap, don't rely on Hover Card for anything the user needs to interact with beyond reading; if it needs a form or a button, that's a Popover's job.

Popover covers the click-triggered version of this same anchored-panel pattern, and is the safer default when the content needs to be reachable without a mouse. Tooltip is smaller still, for single-line labels rather than rich content.