R
◇

Popper

4 parts
Source

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue
import {
  PopperRoot,
  PopperAnchor,
  PopperContent,
  PopperArrow,
} from '@robonen/primitives/popper';

<PopperRoot>
  <PopperAnchor />
  <PopperContent />
  <PopperArrow />
</PopperRoot>

API Reference

PopperRoot

Root

No props or events — renders its element and forwards attributes.

PopperAnchor

Anchor
PropTypeDescription
reference?ReferenceElementCustom reference element for positioning. If not provided, uses the rendered element.

PopperContent

Content
PropTypeDescription
side?SidePreferred side of the anchor.
sideOffset?numberDistance in pixels from the anchor.
sideFlip?booleanFlip to the opposite side on collision.
align?AlignPreferred alignment against the anchor.
alignOffset?numberOffset in pixels from the alignment edge.
alignFlip?booleanFlip alignment on collision.
avoidCollisions?booleanReposition to prevent boundary overflow.
collisionBoundary?Array<Element | null> | Element | nullCollision boundary element(s).
collisionPadding?number | Partial<Record<Side, number>>Distance from boundary for collision detection.
arrowPadding?numberPadding between arrow and content edges.
hideShiftedArrow?booleanHide arrow when it can't be centered.
sticky?'always' | 'partial'Sticky behavior on the align axis.
hideWhenDetached?booleanHide when anchor is fully occluded.
positionStrategy?'absolute' | 'fixed'CSS position strategy.
updatePositionStrategy?'always' | 'optimized'Position update strategy.
disableUpdateOnLayoutShift?booleanDisable layout-shift-based position update.
prioritizePosition?booleanForce content to stay within the viewport.
reference?ReferenceElementCustom reference element, overrides the anchor.

PopperArrow

Arrow
PropTypeDescription
width?numberArrow width in pixels.
height?numberArrow height in pixels.