CSS-ankerpositionering: tooltip en vervolgkeuzelijst zonder JavaScript
Het bouwen van een tooltip in JavaScript betekent code schrijven om de positie te berekenen van het element ten opzichte van de trigger, update die positie bij formaat wijzigen en scrollen, behandel randgevallen wanneer de tooltip buiten de viewport terechtkomt, en doe dat allemaal zonder lay-out-gedoe te introduceren. Het is niet complex, maar het is repetitieve code die elke vindt de applicatie helemaal opnieuw uit.
La API voor CSS-ankerpositionering lost dit probleem op met pure CSS en declaratief. Met browserondersteuning86% mondiaal begin 2026 (Chrome 125+, Edge 125+, Chrome voor Android, Safari Technology Preview), de techniek is volwassen voor productie op sites die moderne browsers ondersteunen. Staat toe om het ene element aan het andere te "verankeren" als referentiepunt voor positionering, met automatische terugval als er niet genoeg ruimte is.
Wat je gaat leren
- De fundamentele concepten van CSS Ankerpositionering: anker, gepositioneerd element
- De eigenschappen
anchor-nameeposition-anchor - De functie
anchor()voor relatieve positionering - Hoe u tooltips, vervolgkeuzelijsten en contextmenu's implementeert in pure CSS
- Automatische terugval met
position-try-fallbacks - Hoe te integreren met Popover API voor volledige toegankelijkheid
- Progressieve verbetering voor browsers zonder ondersteuning
De fundamentele concepten
CSS Anchor Positioning introduceert twee rollen:
-
L'ankerelement (ankerelement): Het element waaraan we verankeren.
Hij ontvangt de eigendom
anchor-namemet een aangepaste identificatiewaarde (voorvoegsel--). -
Il gepositioneerd element (gepositioneerd element): het element dat we willen
positie ten opzichte van het anker. Moet hebben
position: absoluteoposition: fixed, en ontvangtposition-anchorom verbinding te maken met het anker.
/* 1. Definisci l'ancora */
.button-trigger {
anchor-name: --tooltip-anchor;
}
/* 2. Posiziona l'elemento relativamente all'ancora */
.tooltip {
position: absolute;
/* Collega questo elemento all'ancora */
position-anchor: --tooltip-anchor;
/* Posizionamento usando la funzione anchor() */
/* anchor(bottom) = il bordo bottom dell'ancora */
top: calc(anchor(bottom) + 8px);
/* Centra orizzontalmente rispetto all'ancora */
left: anchor(center);
transform: translateX(-50%);
}De anchor()-functie
De functie anchor() wordt omgezet in een coördinaat ten opzichte van de rand
gespecificeerd elementanker. De beschikbare waarden zijn:
anchor(top): bovenrand van het ankeranchor(bottom): onderkant van het ankeranchor(left): linkerrand van het ankeranchor(right): rechterrand van het ankeranchor(center): horizontaal midden van het ankeranchor(middle): verticaal midden van het ankeranchor(self-start),anchor(self-end): gerelateerd aan de richting van de tekst
/* Tooltip sopra il trigger */
.tooltip-top {
position: absolute;
position-anchor: --my-anchor;
bottom: calc(anchor(top) - 8px);
left: anchor(center);
transform: translateX(-50%);
}
/* Tooltip a destra del trigger */
.tooltip-right {
position: absolute;
position-anchor: --my-anchor;
top: anchor(center);
left: calc(anchor(right) + 8px);
transform: translateY(-50%);
}
/* Dropdown sotto il trigger - allineato a sinistra */
.dropdown {
position: absolute;
position-anchor: --dropdown-anchor;
top: calc(anchor(bottom) + 4px);
left: anchor(left);
min-width: anchor-size(width); /* larghezza minima = larghezza dell'ancora */
}anchor-size(): Afmetingen relatief aan het anker
Naast de functie anchor() voor de coördinaten, anchor-size()
geeft u opnieuw toegang tot de afmetingen van het element:
/* Il dropdown ha la stessa larghezza del trigger */
.dropdown {
min-width: anchor-size(width);
/* Altezza massima pari al 50% dell'altezza dell'ancora */
max-height: calc(anchor-size(height) * 0.5);
}Toegankelijke tooltip: CSS-anker + popover-API
De optimale combinatie voor tooltips toegankelijk in 2026 en CSS-ankerpositionering met de Popover-API. De Popover API handelt automatisch het focusbeheer af, de klik buiten om te sluiten en de ARIA-toegankelijkheid. CSS-ankerpositionering beheert de visuele positionering.
<!-- HTML: Popover API + Anchor Positioning -->
<button
popovertarget="tooltip-content"
class="btn-with-tooltip"
>
Hover per info
</button>
<div
id="tooltip-content"
popover="hint"
class="tooltip"
role="tooltip"
>
Informazione contestuale utile all'utente
</div>/* CSS: Anchor + Popover */
.btn-with-tooltip {
anchor-name: --btn-anchor;
}
.tooltip {
/* Stili base del tooltip */
position: absolute;
position-anchor: --btn-anchor;
/* Posiziona sotto il pulsante */
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Reset stili popover */
margin: 0;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 8px 12px;
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
font-size: 0.875rem;
max-width: 280px;
width: max-content;
/* Animazione di entrata */
opacity: 0;
transition: opacity 0.15s ease;
/* Stato visibile (Popover API) */
&:popover-open {
opacity: 1;
}
}
/* Freccia del tooltip */
.tooltip::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-bottom-color: #e2e8f0;
}
.tooltip::after {
content: '';
position: absolute;
top: -7px;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-bottom-color: white;
}Vervolgkeuzelijst Volledig menu
Een completer voorbeeld: een vervolgkeuzemenu van een knop "Acties" met CSS-anker Positionering en Popover API voor toegankelijk focusbeheer:
<!-- Bottone trigger -->
<button
class="actions-btn"
popovertarget="actions-menu"
aria-haspopup="true"
>
Azioni ▼
</button>
<!-- Menu dropdown -->
<menu
id="actions-menu"
popover="auto"
class="dropdown-menu"
>
<li><button>Modifica</button></li>
<li><button>Duplica</button></li>
<li class="separator"></li>
<li><button class="danger">Elimina</button></li>
</menu>/* CSS del dropdown */
.actions-btn {
anchor-name: --actions-anchor;
}
.dropdown-menu {
position: absolute;
position-anchor: --actions-anchor;
/* Allinea il bordo sinistro del menu con il pulsante */
top: calc(anchor(bottom) + 4px);
left: anchor(left);
/* Larghezza minima pari al pulsante */
min-width: anchor-size(width);
/* Reset stili menu */
margin: 0;
padding: 4px 0;
list-style: none;
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
/* Animazione */
opacity: 0;
scale: 0.95;
transform-origin: top left;
transition: opacity 0.15s, scale 0.15s;
&:popover-open {
opacity: 1;
scale: 1;
}
}
.dropdown-menu li button {
display: block;
width: 100%;
padding: 8px 16px;
text-align: left;
border: none;
background: none;
cursor: pointer;
font-size: 0.875rem;
&:hover {
background: #f8fafc;
}
&.danger {
color: #ef4444;
}
}
.dropdown-menu .separator {
height: 1px;
background: #e2e8f0;
margin: 4px 0;
}Automatische fallbacks met positie-try-fallbacks
Een van de meest vervelende problemen met tooltips en vervolgkeuzelijsten is het omgaan met gevallen waarin er is niet genoeg ruimte: een tooltip die buiten het bovenste venster terechtkomt of aan de linkerkant moet automatisch worden verplaatst.
CSS Anchor Positioning lost dit op met position-try-fallbacks, dat
specificeert een lijst met alternatieve plaatsingen die de browser opeenvolgend test:
/* Definisci i posizionamenti alternativi */
@position-try --below {
top: calc(anchor(bottom) + 8px);
bottom: auto;
left: anchor(center);
right: auto;
}
@position-try --above {
top: auto;
bottom: calc(anchor(top) + 8px);
left: anchor(center);
right: auto;
}
@position-try --right {
top: anchor(center);
left: calc(anchor(right) + 8px);
right: auto;
bottom: auto;
}
@position-try --left {
top: anchor(center);
right: calc(anchor(left) + 8px);
left: auto;
bottom: auto;
}
.tooltip {
position: absolute;
position-anchor: --my-anchor;
/* Posizionamento default: sotto */
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Fallback: prova prima sopra, poi destra, poi sinistra */
position-try-fallbacks: --above, --right, --left;
/* Fallback finale: usa la prima opzione disponibile nel viewport */
position-try-order: most-block-size;
}Progressieve verbetering voor browsers zonder ondersteuning
Voor browsers die CSS Anchor Positioning nog niet ondersteunen (Firefox stable
ondersteunt het nog niet (vanaf begin 2026), gebruikt @supports voor
een terugval bieden:
/* Fallback: tooltip sempre visibile o con JS */
.tooltip {
/* Stili di default accessibili: mostro un title attribute */
display: none; /* nascosto, gestito da JS fallback */
}
/* Se il browser supporta anchor positioning: CSS puro */
@supports (anchor-name: --test) {
.trigger {
anchor-name: --my-anchor;
}
.tooltip {
display: block; /* visibile, gestito da CSS */
position: absolute;
position-anchor: --my-anchor;
top: calc(anchor(bottom) + 8px);
left: anchor(center);
transform: translateX(-50%);
/* Nascosto di default, mostrato su hover/focus */
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
.trigger:hover + .tooltip,
.trigger:focus + .tooltip {
opacity: 1;
pointer-events: auto;
}
}
/* JavaScript fallback per browser legacy */
if (!CSS.supports('anchor-name', '--test')) {
// Import libreria JS per tooltip
import('./tooltip-fallback.js').then(module => module.init());
}Firefox: nog steeds beperkte ondersteuning
Vanaf begin 2026 ondersteunt Firefox nog geen CSS-ankerpositionering in de
stabiele versie (en in actieve ontwikkeling). Dit betekent dat 20-25% van
Desktopgebruikers in Firefox zullen de terugval zien. VS @supports voor
zorg ervoor dat de ervaring altijd functioneel is, zelfs zonder ankerpositionering.
Volgende stappen
Je hebt nu tooltips en declaratieve vervolgkeuzelijsten in pure CSS. Het volgende artikel van serie verkent de View Transitions API: hoe u vloeiende animaties implementeert native navigatie in de browser, zowel voor Single Page Applications als voor Toepassingen met meerdere pagina's, zonder bibliotheken van derden.
Conclusies
CSS-ankerpositionering is een van de meest verwachte toevoegingen aan de CSS-taal de afgelopen jaren. Het elimineert een hele categorie JavaScript-code: handmatige berekening van de positioneringscoördinaten — vervangen door declaratieve CSS die de browser verwerkt native, inclusief automatische fallbacks en updates scroll en wijzig het formaat.
Met ondersteuning voor 86% van de wereldwijde browsers kunt u het al als een verbetering gebruiken progressief, waardoor oudere browsers nog steeds een ervaring hebben functioneel. De combinatie met de Popover API voor toegankelijkheidsbeheer vertegenwoordigt de moderne en complete stapel voor het bouwen van UI-overlays in 2026.