# Popper

Source: https://design.ritchiebros.com/components/utils/popper/

Popper is the low-level positioning primitive for floating elements — it places content relative to a reference element. Popover and Tooltip are built on top of it.

## Figma

The Figma reference for **Popper** will appear here once the design link is added.

## Storybook

Interactive examples for **Popper** will render here once the Storybook link is wired in.

## Best practices

- Use a higher-level component (Popover, Tooltip, Menu) when it fits; use Popper directly only when you need custom positioning behavior.
- Keep the floating content anchored to and visually connected with its reference element.
- Handle closing on outside click and on Escape for interactive content.

## Accessibility

- Since Popper is unstyled and unopinionated, add the appropriate roles, labels, and focus management for whatever it contains.

## Related components

- [Popover](https://design.ritchiebros.com/components/utils/popover/)
- [Tooltip](https://design.ritchiebros.com/components/data-display/tooltip/)
- [Menu](https://design.ritchiebros.com/components/navigation/menu/)