Popover

A popover component that displays rich content in a floating container. Supports click and hover triggers, multiple placements, and controlled/uncontrolled modes.

Basic Usage

import { Popover, Button } from 'uiplex';

<Popover
  content={
    <div style={{ padding: '1rem' }}>
      This is a simple popover content.
    </div>
  }
>
  <Button>Click me</Button>
</Popover>

With Header, Body, and Footer

import {
  Popover,
  PopoverHeader,
  PopoverBody,
  PopoverFooter,
  PopoverCloseButton,
  Button,
} from 'uiplex';

<Popover
  content={
    <>
      <PopoverHeader>
        Popover Title
        <PopoverCloseButton onClose={() => {}} />
      </PopoverHeader>
      <PopoverBody>
        This is the popover body content.
      </PopoverBody>
      <PopoverFooter>
        <Button size="sm" variant="primary">Action</Button>
        <Button size="sm" variant="outline">Cancel</Button>
      </PopoverFooter>
    </>
  }
>
  <Button>Open Popover</Button>
</Popover>

Placements

<Popover content={<div>Top</div>} placement="top">
  <Button>Top</Button>
</Popover>
<Popover content={<div>Bottom</div>} placement="bottom">
  <Button>Bottom</Button>
</Popover>
<Popover content={<div>Left</div>} placement="left">
  <Button>Left</Button>
</Popover>
<Popover content={<div>Right</div>} placement="right">
  <Button>Right</Button>
</Popover>

Hover Trigger

<Popover
  content={<div>Hover to see popover</div>}
  trigger="hover"
>
  <Button>Hover me</Button>
</Popover>

Controlled Mode

import { useDisclosure } from 'uiplex';

const { isOpen, onOpen, onClose, onToggle } = useDisclosure();

<Popover
  content={<div>This popover is controlled</div>}
  isOpen={isOpen}
  onOpenChange={(open) => {
    if (open) onOpen();
    else onClose();
  }}
>
  <Button onClick={onToggle}>Toggle Popover</Button>
</Popover>

Without Arrow

<Popover
  content={<div>No arrow</div>}
  showArrow={false}
>
  <Button>No Arrow</Button>
</Popover>

API Reference

Prop	Type	Default	Description
children	React.ReactElement	-	Trigger element
content	React.ReactNode	-	Popover content
placement	"top" \| "bottom" \| "left" \| "right" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end" \| "right-start" \| "right-end"	"bottom"	Popover placement relative to trigger
isOpen	boolean	-	Controlled open state
defaultIsOpen	boolean	false	Default open state (uncontrolled)
onOpenChange	(isOpen: boolean) => void	-	Callback when open state changes
trigger	"click" \| "hover"	"click"	Trigger type
closeOnBlur	boolean	true	Close when clicking outside
closeOnClick	boolean	false	Close when clicking trigger again
showArrow	boolean	true	Show arrow pointing to trigger