CSS Anchor Positioning places an element next to another element, called the anchor, using only CSS. It replaces JavaScript libraries like Popper.js and Floating UI for tooltips, dropdowns and popovers, and it can flip the element automatically when there is no room.

HTML

<button class="lotgrafix-trigger" popovertarget="lotgrafix-tip">Hover or click me</button>
<div id="lotgrafix-tip" class="lotgrafix-tooltip" popover>Tooltip content</div>

CSS

.lotgrafix-trigger {
    anchor-name: --lotgrafix-anchor;
}

.lotgrafix-tooltip {
    position: fixed;
    position-anchor: --lotgrafix-anchor;
    position-area: top;
    inset: auto;
    margin: 0 0 8px;
    position-try-fallbacks: flip-block;
}

How it works

• anchor-name: gives the reference element a name that starts with two dashes.
• position-anchor: tells the positioned element which anchor to follow.
• position-area: chooses the zone around the anchor. Values include top, bottom, left, right, top left and bottom right.
• position-try-fallbacks: tries another position, like flip-block or flip-inline, when the element would overflow the screen.

Match the anchor width

.lotgrafix-dropdown {
    position: fixed;
    position-anchor: --lotgrafix-anchor;
    position-area: bottom span-right;
    min-width: anchor-size( width );
}

Support note

Anchor positioning is newer than most features in this series. Check current support before using it in production and keep a simple fallback.

@supports not ( position-area: top ) {
    .lotgrafix-tooltip {
        position: absolute;
        top: 100%;
        left: 0;
    }
}