HoverCard
Un aperçu au survol.
Ce n'est pas un Tooltip : celui-ci porte une phrase et se lit d'un coup d'œil, celui-là porte du contenu — une fiche, un résumé, une image — que l'on peut vouloir survoler à son tour, voire sélectionner.
Installation
bash
sia-ui add hover-cardOu par le paquet, sans rien copier :
tsx
import { HoverCard } from "@sia-ui/react-web";Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
* content | ReactNode | — | |
className | string | — | |
closeDelay | number | 150 | Délai avant fermeture, le temps d'atteindre le panneau à la souris. |
onOpenChange | (open: boolean) => void | — | |
open | boolean | — | |
openDelay | number | 300 | Délai avant ouverture. Il n'est pas cosmétique : sans lui, traverser la page avec la souris ouvre et ferme une dizaine de panneaux au passage. |
overlayProps | Partial<Omit<OverlayProps, "children" | "open" | "onOpenChange" | "anchorRef">> | — | Réglages du panneau flottant — décalage, marge au bord, rôle, classe. |
placement | OverlayPlacement | bottom-start | |
width | string | number | 20 * 16 |
* obligatoire.
Voir aussi
- Le composant dans le catalogue — états, variantes, et bac à sable.
- La référence complète — tous les composants.