Popover

Le composant Popover permet d’afficher du contenu contextuel lié à un élément déclencheur.

Exemples

Popover basique

Un popover centré avec un petit contenu textuel.

<Popover
  trigger={<Button leftIcon={<Settings04 />} />}
  content={<div className="p-4">Contenu du popover</div>}
/>

Popover avec formulaire

Un formulaire peut être intégré directement dans le popover.

<Popover
  trigger={<Button>Login</Button>}
  content={
    <form className="p-4 space-y-3">
      <Input placeholder="Email" />
      <Input type="password" placeholder="Password" />
      <Button className="w-full">Submit</Button>
    </form>
  }
  align="start"
  sideOffset={8}
/>

API Reference

Props	Type	Default	Description
trigger	React.ReactNode	—	The element that triggers the popover.
content	React.ReactNode	—	The content displayed inside the popover.
defaultOpen?	boolean	—	The open state of the popover when it is initially rendered. Use this when you do not need to control its open state.
open?	boolean	—	The controlled open state of the popover. Must be used in conjunction with `onOpenChange`.
onOpenChange?	function: `(open: boolean) => void`	—	Event handler called when the open state of the popover changes.
align?	`"center" \| "start" \| "end"`	`"center"`	The alignment of the content relative to the trigger.
sideOffset?	number	4	The distance between the trigger and the popover content.
triggerClassName?	string	—	Custom CSS class applied to the trigger element.
contentClassName?	string	—	Custom CSS class applied to the popover content.