Popper

Popper is a low-level positioning primitive built on @floating-ui/react-dom. It handles anchor-to-content positioning with collision detection, offset, and alignment options. Popover, Tooltip, and DropdownMenu are built on top of Popper.

Usage

import { Popper, PopperAnchor, PopperContent, PopperArrow } from '@loke/ui/popper';
import { useState } from 'react';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <Popper open={open}>
      <PopperAnchor asChild>
        <button onClick={() => setOpen(!open)}>Anchor</button>
      </PopperAnchor>
      <PopperContent side="bottom" align="start">
        <div style={{ background: 'white', border: '1px solid #ccc', padding: '8px' }}>
          Content
        </div>
        <PopperArrow width={10} height={5} />
      </PopperContent>
    </Popper>
  );
}

Sub-components

• PopperAnchor — Anchor element for positioning
• PopperContent — Floating content positioned relative to anchor
• PopperArrow — Arrow pointing to the anchor

Props

Examples

Content anchored below a trigger

Content anchored to the side

Accessibility

• Popper itself has no accessibility features; consumers must add appropriate ARIA.
• Content rendered in a portal should have role="dialog", role="tooltip", or similar.
• Use aria-labelledby and aria-describedby for screen reader context.

Best practices

• Use higher-level components (Popover, Tooltip, DropdownMenu) when possible.
• Set avoidCollisions= to prevent content from being cut off near viewport edges.
• Provide both side and align for predictable positioning.
• Use sideOffset to create visual space between anchor and content.