Carte au survol

Un aperçu flottant qui s'ouvre au survol — aperçus de profils, aperçus de liens, termes du glossaire — avec un style néobrutaliste caractérisé par des bordures et des ombres.

import {
  Avatar,
  AvatarFallback,

La carte au survol fait flotter un panneau d’aperçu riche au-dessus de la page quand le pointeur s’attarde sur un déclencheur — sans le moindre clic. Construite sur la primitive Base UI Preview Card et habillée selon la recette néobrutaliste : bordures épaisses, ombres franches et typographie affirmée.

À privilégier pour :

Aperçus de profil — survolez une @mention ou un avatar pour afficher la bio, les statistiques et un bouton d’abonnement.
Aperçus de liens — montrez le titre et le résumé d’une page avant que le lecteur ne se décide à cliquer.
Termes de glossaire — définissez le jargon directement dans la doc, sans quitter la page.

Installation


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/hover-card.json
npx shadcn@latest add https://neobrutalism.com/r/base/hover-card.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/hover-card.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/hover-card.json

Installez les dépendances suivantes :


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Copiez-collez le code suivant dans votre projet.

components/ui/hover-card.tsx

"use client"

import * as React from "react"
import { HoverCard as HoverCardPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function HoverCard({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
}

function HoverCardTrigger({
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
  return (
    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
  )
}

function HoverCardContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
  return (
    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
      <HoverCardPrimitive.Content
        data-slot="hover-card-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded border-2 bg-popover p-2.5 text-sm text-popover-foreground shadow-md outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
          className
        )}
        {...props}
      />
    </HoverCardPrimitive.Portal>
  )
}

export { HoverCard, HoverCardTrigger, HoverCardContent }

Adaptez les chemins d’import à la structure de votre projet.

Utilisation

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

Composition

Utilisez la composition suivante pour construire un HoverCard :

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Délais de déclenchement

Utilisez delay et closeDelay sur le déclencheur pour contrôler quand la carte s’ouvre et se ferme.

<HoverCard>
  <HoverCardTrigger delay={100} closeDelay={200}>
    Hover
  </HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>

Positionnement

Utilisez les props side et align de HoverCardContent pour contrôler le placement.

<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    Content
  </HoverCardContent>
</HoverCard>

Exemples

Simple

import {
  Avatar,
  AvatarFallback,

Côtés

import { Button } from "@/components/ui/button"
import {
  HoverCard,

RTL

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

"use client"

import {

Accessibilité

Les cartes au survol n’ont pas de modèle WAI-ARIA dédié — l’analogue le plus proche est le modèle Tooltip. La primitive Base UI ouvre la carte au focus clavier du déclencheur et la ferme avec Escape. Traitez néanmoins son contenu comme un complément pour les utilisateurs voyants et gardez comme déclencheur un vrai lien, pour que le contenu complet reste accessible à destination.

Interactions clavier :

Touche	Action
`Tab` / `Shift + Tab`	Déplace le focus vers le déclencheur — prendre le focus ouvre la carte, le quitter la ferme
`Escape`	Ferme la carte
`Enter`	Suit le lien du déclencheur

Référence API

Consultez la documentation Base UI pour en savoir plus.