74 Dynamic Arrow Positioning. 74 of 95.
74/FLOATING GEOMETRY/74 of 95
Dynamic Arrow Positioning
The arrow should point at the anchor, wherever it shifted.
The problem
When a popover shifts to stay on screen, a centered arrow no longer points at its trigger.
The solution
The arrow follows the anchor along the popover's edge.
Experiment
Play with the values
8px
How it works
- The popover is positioned first, including any flip away from the trigger.
- Shift middleware may slide it along the edge so it stays on screen.
- The arrow's offset is measured from the anchor after that shift.
- The arrow is placed on the popover edge pointing at the anchor.
- It is clamped to the edge padding so it never sits on a corner.
Seen in
Tooltips
The pointer stays aimed at the element even after shifting.
Onboarding hints
Coach marks keep their arrow on the highlighted target.
Popovers
Rich popovers point precisely at their trigger.
Menus
Callout arrows track the button along the edge.