287 of 300

Platform 01

Anchored popover

The card is tied to the chip with CSS anchor positioning: position-area: bottom hangs it 6 px under the chip and slides it sideways to stay inside the area, and position-try-fallbacks: flip-block, flip-inline moves it above the chip when the space below is shorter than the card, with its transform-origin moved to the edge that faces the chip.

From the Engineering page on ramtt.com

  • Interest invokers show it after a 450 ms hover or on keyboard focus, and a click on the chip pins it.
  • The chip follows the pointer 1:1, glides on at its release speed and settles with the 50 ms lag, and arrow keys move it 16 px, 64 px with Shift.
  • Without anchor positioning a script places and flips the card by the same rule, and without interest invokers a timer gives the same 450 ms delay.