Controls

Arrows hidden in fallback mode
Fallback Strategy

Popover Arrows with CSS Anchor Positioning

Arrows that automatically flip when the popover repositions, using the clip-path: inset() margin-box technique. Arrows are hidden when CSS Anchor Positioning is not available.

Top

Centered above the trigger

Top Start

Above, aligned to start

Top End

Above, aligned to end

Bottom

Centered below the trigger

Bottom Start

Below, aligned to start

Bottom End

Below, aligned to end

Left

Centered to the left

Left Start

Left, aligned to start

Left End

Left, aligned to end

Right

Centered to the right

Right Start

Right, aligned to start

Right End

Right, aligned to end

How it works (CSS)

The CSS technique uses clip-path: inset() margin-box to create auto-flipping arrows:

  • Arrows pointing in all four directions are created using ::before and ::after
  • clip-path: inset(1px) margin-box clips based on the margin-box
  • Margins control which arrow is visible — arrows "escape" the clip
  • @position-try changes margins when the popover flips
Limitation: This technique requires box-shadow: none on the popover.

JS Fallback Behavior

For browsers without CSS Anchor Positioning support:

  • JavaScript calculates available space using getBoundingClientRect()
  • Popover flips to the opposite side if there's not enough space
  • Arrows are hidden — the auto-flip technique requires @position-try
  • Positioning still works correctly, just without the arrow

Position-Area Reference

Mapping placement names to position-area values:

Placementposition-area
toptop center
bottombottom center
leftleft center
rightright center
top-starttop span-right
right-startright span-bottom