Introduction

Un popover qui apparaît lorsque l'utilisateur survole un déclencheur, utile pour afficher des informations supplémentaires.

Utilisation

HoverCard de base

import { HoverCard } from "../components/ui";

export default function MyPage() {
  return (
    <HoverCard.Root>
      <HoverCard.Trigger>
        <a href="#">Hover me</a>
      </HoverCard.Trigger>
      <HoverCard.Positioner>
        <HoverCard.Content>
          Supplementary information shown on hover.
        </HoverCard.Content>
      </HoverCard.Positioner>
    </HoverCard.Root>
  );
}

Constructeur de pages CMS

Ce composant est disponible sous forme de bloc hoverCard dans Page Builder (content/pages/*.json) :

{
  "type": "hoverCard",
  "triggerText": "Hover me",
  "showArrow": true,
  "title": "Supplementary information",
  "description": "Shown on hover."
}

Propriétés

Carte de survol

Propriété	Type	Description
interactive	boolean	Activez l’hydratation côté client. Par défaut : « vrai ».
open	boolean	État ouvert contrôlé.
openDelay	number	Délai en ms avant ouverture au survol.
closeDelay	number	Retard en ms avant fermeture en congé.
class	string	Classes CSS personnalisées pour l'élément racine.

Sous-composants

HoverCard.Root, HoverCard.Trigger, HoverCard.Positioner, HoverCard.Content, HoverCard.Arrow, HoverCard.ArrowTip