Position tooltips, popovers, and dropdowns relative to a trigger element — no Floating UI or JS offset math needed. Pure CSS.
anchor-name: --my-anchor.
On the positioned element, set position-anchor: --my-anchor and use
position-area (grid-based) or anchor() (precise insets) to place it.
Add position-try-fallbacks: flip-block to auto-flip when overflowing the viewport.
This replaces Bootstrap’s Floating UI dependency entirely.
position-area: topHover any button to show a tooltip positioned above it with position-area: top. Auto-flips below via position-try-fallbacks: flip-block. Zero JS positioning.
anchor() functionA dropdown positioned with top: anchor(bottom) and left: anchor(left). Flips upward near the bottom of the viewport.
Select a position-area value to see where the element gets placed relative to the anchor. The 3×3 conceptual grid positions elements around the anchor.
position-try-fallbacksEach popover prefers a different side. Scroll or resize the window so the popover would overflow — the browser automatically flips it to the opposite side.
<!-- HTML: button + popover -->
<button class="tooltip-trigger"
popovertarget="my-tip">
Hover me
</button>
<div id="my-tip" popover="manual"
class="anchor-tooltip">
Tooltip content
</div>
<style>
/* Reset conflicting UA popover styles */
[popover] { margin: 0; inset: auto; }
/* Name the anchor */
.tooltip-trigger { anchor-name: --my-btn; }
/* Position the tooltip */
.anchor-tooltip {
position: fixed;
position-anchor: --my-btn;
position-area: top;
margin-bottom: 8px;
/* Auto-flip to bottom if it overflows */
position-try-fallbacks: flip-block;
/* Hide when anchor scrolls away */
position-visibility: anchors-visible;
}
</style>
<!-- Dropdown: anchor() for precise edges -->
.anchor-dropdown {
position: fixed;
position-anchor: --menu-btn;
top: anchor(bottom);
left: anchor(left);
margin-top: 4px;
position-try-fallbacks: flip-block;
}