46 / FLOATING GEOMETRY
Dynamic Arrow Positioning
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
Task: Open popovers from anchors at different positions.
NAIVE
arrow x—
modecentered
THOUGHTFUL
arrow x—
modedynamic
Play with the values
8px
How it works
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.