bx

Hover Card

For sighted users to preview content available behind a link.

@bext
tsx 
<HoverCard>
  <HoverCardTrigger>
    <a href="/user/@bext" className="underline">@bext</a>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="flex gap-3">
      <Avatar>
        <AvatarImage src="/avatars/bext.png" />
        <AvatarFallback>BX</AvatarFallback>
      </Avatar>
      <div className="space-y-1">
        <h4 className="text-sm font-semibold">@bext</h4>
        <p className="text-sm text-muted-foreground">...</p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

HoverCard — carte flottante déclenchée au hover, pour du contenu riche (mini-profil, aperçu de lien, détails contextuels). Similaire à Tooltip mais plus large (w-64 par défaut) avec possibilité de mettre des images/liens.

Pattern CSS-only : le trigger et le content sont dans un wrapper group. Le content passe de invisible opacity-0 à visible opacity-100 via group-hover:. Pas d'island — zéro JS.

Utiliser pour : mini-profil user au hover d'un @username, aperçu d'un lien externe, résumé d'une entité listée.

Installation

Terminal 
$ bext ui add hover-card

Usage

tsx 
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@bext-stack/ui/primitives"

<HoverCard>
  <HoverCardTrigger>
    <a href="/user/@bext" className="underline">@bext</a>
  </HoverCardTrigger>
  <HoverCardContent align="center">
    {/* mini-profil, image, bio... */}
  </HoverCardContent>
</HoverCard>

Anatomy

<HoverCard>                                // group/hovercard
  ├── <HoverCardTrigger>
  │   └── <a href="/user/@bext">@bext</a>
  └── <HoverCardContent align="center">   // invisible → visible au hover
      └── ...contenu riche...

API Reference

HoverCard

Prop Type Default Description
className string — Wrapper group/hovercard (relative inline-block).

HoverCardTrigger

Prop Type Default Description
children ReactNode — Élément à survoler pour déclencher le reveal.

HoverCardContent

Prop Type Default Description
align "start" | "center" | "end" "center" Alignement horizontal. start=left-0, center=left-1/2 -translate-x-1/2, end=right-0.
className string — Défaut : absolute top-full mt-2 w-64 rounded-md border bg-popover p-4 shadow-md.

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute On Values Description
group/hovercard HoverCard — Nommé pour éviter conflit avec d'autres group hover parents.

Keyboard

Key Action
Tab Focus le trigger. Pas de reveal automatique au focus (limitation CSS pure — utiliser Popover si besoin).

Accessibility

Le CSS-only n'a pas de group-focus-within sur HoverCard — le focus keyboard ne révèle pas la carte. Pour un composant vraiment accessible, préférer Popover qui s'ouvre au clic (focusable + activable clavier).

Utiliser uniquement pour du contenu non-essentiel — l'info doit rester atteignable même sans hover (ex : le username reste cliquable même sans voir la carte).

Examples

Aligned start

Aligned start
tsx 
<HoverCardContent align="start">…</HoverCardContent>
Try it live
Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser
Pure PRISM + real bext signals — fine-grained, no re-render.
← Form Input →