Study · CSS · Positioning
Anchored content that knows when to hide
Move a tooltip’s anchor, let placement adapt, and hide it when the anchor leaves view.
A tooltip can follow an info icon without calculating screen coordinates in JavaScript. Choose a tooltip position, then scroll up, down, left or right inside the preview to move the info icon toward any edge. position-try-fallbacks lets the browser try the opposite side when there is not enough room.
position-area: top; position-try-fallbacks: flip-block, flip-inline; position-visibility: anchors-visible;
Scroll inside the preview to move the anchor.
The tooltip stays open so you can follow its placement. Keep scrolling: position-visibility: anchors-visible hides the tooltip once its icon leaves view, even though the tooltip sits outside the scrolling content.