Skip to main content

at

Description​

Optional. Defines the alignment or anchor point of a popup relative to its parent element

Usage​

at?: string;

Parameters​

The at property accepts one of the following string values:

Basic positions​

  • "top" - places the popup above the parent
  • "bottom" - places the popup below the parent
  • "left" - places the popup to the left of the parent
  • "right" - places the popup to the right of the parent
  • "center" - centers the popup relative to the parent
  • "point" - positions the popup at a specific point rather than relative to the parent

Corner positions​

  • "top-left" - aligns the popup to the top-left corner of the parent
  • "top-right" - aligns the popup to the top-right corner of the parent
  • "bottom-left" - aligns the popup to the bottom-left corner of the parent
  • "bottom-right" - aligns the popup to the bottom-right corner of the parent

Start / Center / End aligned variants​

These follow directional alignment (start / center / end).

Bottom aligned​
  • "bottom-start" - bottom aligned, anchored to the start side
  • "bottom-center" - bottom aligned, centered horizontally
  • "bottom-end" - bottom aligned, anchored to the end side
Top aligned​
  • "top-start" - top aligned, anchored to the start side
  • "top-center" - top aligned, centered horizontally
  • "top-end" - top aligned, anchored to the end side
Left aligned​
  • "left-start" - left aligned, anchored to the top (start)
  • "left-center" - left aligned, centered vertically
  • "left-end" - left aligned, anchored to the bottom (end)
Right aligned​
  • "right-start" - right aligned, anchored to the top (start)
  • "right-center" - right aligned, centered vertically
  • "right-end" - right aligned, anchored to the bottom (end)

Fit variants​

These adjust positioning to keep the popup inside the viewport:

  • "bottom-fit" - below the parent, adjusting to fit
  • "top-fit" - above the parent, adjusting to fit
  • "center-fit" - centered on screen while fitting the viewport

Example​

<Popup parent={buttonEl} at="right-bottom">
  <div className="popup">
    <p>Menu appears at the bottom-right corner of the button</p>
  </div>
</Popup>