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 class="popup">
    <p>Menu appears at the bottom-right corner of the button</p>
  </div>
</Popup>