Popover (fenêtre contextuelle)

Semblable au Tooltip, mais il peut accueillir un titre et un contenu plus riche (structures HTML, listes, etc.), déclenché par un clic ou un survol.

Utilisation de base

Positions, déclencheurs et flèche

import { LhButton, LhPopover } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhPopover title="Titre" content="Ceci est le contenu de la fenêtre contextuelle." placement="top">
      <LhButton>Au-dessus</LhButton>
    </LhPopover>
  )
}

Popover Props

Prop	Description	Type	Options	Valeur par défaut
children	Nœud déclencheur	ReactNode	—	—
title	Titre (rendu dans la zone __title)	ReactNode	—	—
content	Contenu (rendu dans la zone __content)	ReactNode	—	—
placement	Position d'affichage	LhPopoverPlacement	top / bottom / left / right (avec -start / -end)	'top'
trigger	Mode de déclenchement	LhPopoverTrigger	'hover' | 'click' | 'focus' | 'manual'	'click'
disabled	Désactive la fenêtre contextuelle	boolean	—	false
arrow	Afficher la flèche	boolean	—	true
width	Largeur de la surcouche	string | number	—	—
visible	Visibilité contrôlée	boolean	—	—
defaultVisible	Visibilité par défaut (non contrôlée)	boolean	—	false
showAfter	Délai d'affichage (ms ; 200 par défaut pour éviter les déclenchements involontaires)	number	—	200
hideAfter	Délai de masquage (ms ; 100 par défaut pour laisser le pointeur entrer dans la surcouche)	number	—	100
popperClass	Nom de classe personnalisé pour la surcouche	string	—	—
themeVars	Variables de thème au niveau du composant	Record<string, string>	—	—
bgPattern	Motif de fond au niveau du composant	string	—	—
sx	Raccourci de mise en page (appliqué au déclencheur)	SxProps	—	—

Événements de Popover

Événement	Description	Signature du callback	Équivalent Vue
onVisibleChange	Changement de visibilité (déclenché en mode contrôlé comme en mode non contrôlé)	(visible: boolean) => void	update:visible

ref

forwardRef<HTMLDivElement> — l'élément racine du déclencheur. LhPopoverInstance expose show() / hide() / toggle() / isVisible.

Piégeage du focus

Avec trigger="click", la surcouche piège le focus selon la sémantique des boîtes de dialogue (Tab boucle à l'intérieur) et le restitue à la fermeture ; les déclencheurs hover / focus ne volent pas le focus, conformément au comportement isModal de lh-ui-plus.

Accessibilité

La surcouche a role="dialog" ; lorsqu'un titre est présent, il est associé via aria-labelledby, et le déclencheur est associé à la surcouche via aria-describedby.

Styles

import '@lh-ui/react/style/popover'