Note Absolute positioning removes the element from the document flow and positions it relative to the nearest positioned ancestor (one with position: relative, absolute, fixed, or sticky). If none exists, it positions relative to the viewport.
.trigger{anchor-name:--trigger;}.popover{position: absolute;position-anchor:--trigger;bottom:anchor(top);left:anchor(center);translate:-50%0;margin-bottom:8px;/* Fallback if not enough space above */position-try-fallbacks: flip-block;}
Note Anchor positioning lets you position elements relative to other elements anywhere in the DOM without a shared parent. position-try-fallbacks automatically repositions (flips) when the element would overflow the viewport. This replaces JavaScript-based tooltip/popover positioning libraries.
Frequently asked questions
How does HTML & CSS handle tooltip position?
HTML & CSS covers this with 2 copy-ready snippets on this page. The "Position Absolute" snippet in HTML & CSS uses `position: absolute;`.
Which code does the HTML & CSS example use?
The "Position Absolute" snippet uses `position: absolute;`, from the Layout & Positioning section of the HTML & CSS cheat sheet.
What other HTML & CSS snippets are shown for "tooltip position"?
Besides "Position Absolute", this page also shows "CSS Anchor Positioning".
Is there anything to watch out for?
Yes. For "Position Absolute": Absolute positioning removes the element from the document flow and positions it relative to the nearest positioned ancestor (one with position: relative, absolute, fixed, or sticky). If none exists, it positions relative to the viewport.