---
title: 'The Popover API: Your New Best Friend for Tooltips'
description: >-
Discover how the Popover API and new CSS features simplify tooltip creation,
making them accessible and well-positioned across all major browsers
language: Dutch
url: 'https://voorhoe.de/nl/blog/the-popover-api-your-new-best-friend-for-tooltips/'
---
Blog
# The Popover API: Your New Best Friend for Tooltips
Door [Sjoerd](/nl/team/sjoerd.md)
7 October 2024
* [De uitdagingen van het maken van tooltips](#de-uitdagingen-van-het-maken-van-tooltips)
* [De Popover API begrijpen](#de-popover-api-begrijpen)
* [De Popover API implementeren](#de-popover-api-implementeren)
* [Tooltips positioneren met CSS](#tooltips-positioneren-met-css)
* [Omgaan met viewport overflow](#omgaan-met-viewport-overflow)
* [Popover Demo](#popover-demo)
* [Conclusie](#conclusie)
Moeiteloos tooltips maken met de Popover API en nieuwe CSS-functies
Ik heb vaak moeite gehad met het maken van tooltips die er niet alleen goed uitzien, maar ook goed werken op verschillende browsers en schermgroottes. In een van mijn recente projecten heb ik uren besteed aan het oplossen van rendering-bugs en het aanpassen van code om ervoor te zorgen dat de tooltip er perfect uitzag en goed werkte. Toen ontdekte ik de Popover API, wat alles een stuk makkelijker maakte.\
**\
**De Popover API, ondersteund door alle grote browsers, vereenvoudigt het maken van tooltips. Bovendien bieden nieuwe CSS-functies zoals `anchor` en `@position-try` meer controle over de plaatsing en het gedrag van tooltip. Hoe maken deze nieuwe tools het implementeren van tooltips eenvoudiger? Laten we eens een kijkje nemen.
## De uitdagingen van het maken van tooltips
Het implementeren van tooltips is ingewikkelder dan het op het eerste gezicht lijkt. Developers moeten verschillende UI-problemen aanpakken, zoals:
1. De tooltip goed associëren met het element dat deze triggert
2. Voorkomen dat de tooltip op onverwachte plekken verschijnt
3. Zorgen dat de tooltip niet buiten het viewport komt
4. Het toevoegen van de ARIA-attributen voor toegankelijkheid
Voorbeelden van hoe een tooltip er vreemd uit kan zien
## De Popover API begrijpen
De Popover API pakt deze uitdagingen aan door een gestandaardiseerde manier te bieden om popover-inhoud bovenop andere pagina-inhoud weer te geven. Deze API stelt ontwikkelaars in staat om popovers declaratief te beheren met HTML-attributen of programmatisch via JavaScript, wat een aanzienlijke verbetering is ten opzichte van traditionele methoden.
De Popover API is veelzijdig en kan voor verschillende doeleinden worden gebruikt, waaronder:
1. Tooltips
2. Complexe gebruikersinteractieve elementen zoals actiemenu's
3. Aangepaste toastmeldingen
## De Popover API implementeren
Hier is een eenvoudig voorbeeld om te laten zien hoe je kunt beginnen:
```
Why we need this: We'll send order confirmations and important updates to this email address. Make sure to use an address you check regularly.
```
Deze code maakt een tooltip die extra informatie weergeeft wanneer deze wordt getriggerd. Het werkt goed, maar de styling laat wat te wensen over.
Hoe de popover eruit ziet in de meeste browsers
## Tooltips positioneren met CSS
Een van de uitdagingen met tooltips is het positioneren ervan ten opzichte van hun trigger-element. Deze berekening houdt rekening met verschillende factoren, zoals:
1. Aan welke kant van het trigger-element moet de tooltip worden weergegeven?
2. Waar bevindt het midden van de tooltip zich ten opzichte van het midden van de trigger?
3. Is er genoeg ruimte om de tooltip weer te geven?
Het implementeren hiervan in JavaScript kan resulteren in een grote hoeveelheid code. Met de Popover API en nieuwe CSS-functies kunnen we echter hetzelfde effect bereiken met veel minder code:
```
#popover-trigger {
anchor-name: --popover-trigger;
}
#popover {
position: absolute;
max-width: 250px;
min-width: 200px;
position-anchor: --popover-trigger;
inset-area: right;
}
```
```
const popover = document.querySelector("[popover]");
const trigger = document.querySelector("[popovertarget]");
trigger.addEventListener("mouseenter", (event) => {
popover.showPopover();
});
trigger.addEventListener("mouseleave", (event) => {
popover.hidePopover();
});
```
## Omgaan met viewport overflow
Om ervoor te zorgen dat de tooltip correct werkt wanneer deze niet binnen het viewport past, kunnen we een combinatie van de **`position-try` **rule en de **`@position-try` **at-rule gebruiken:
```
#popover {
...
--margin: 8px;
max-width: 250px;
min-width: 200px;
margin: var(--margin);
position-anchor: --popover-trigger;
inset-area: right;
position-try-options: --bottom;
}
@position-try --bottom {
margin: var(--margin);
inset-area: bottom;
}
```
Dit is wat elke eigenschap doet:
* **position-anchor: --popover-trigger;**: Verankert de tooltip aan het trigger-element met behulp van een aangepast ankerpunt.
* **inset-area: right;**: Positioneert de tooltip aanvankelijk rechts van het trigger-element.
* **position-try-options: --bottom;**: Geeft aan dat de browser een alternatieve positie moet proberen als de tooltip buiten het viewport zou vallen.
* **@position-try --bottom { ... }**: Bepaalt wat er moet gebeuren als de tooltip opnieuw moet worden gepositioneerd, en verplaatst deze naar de onderkant van het trigger-element met dezelfde marge.
Met wat extra styling ziet het resultaat er als volgt uit:
Hoe de tooltip zich gedraagt wanneer deze buiten de viewport valt.
Eindresultaat:
## Conclusie
De Popover API en nieuwe CSS-functies vereenvoudigen het proces van het maken en beheren van tooltips en popovers aanzienlijk. Het neemt de complexiteit van het beheren van popovers weg en zorgt ervoor dat ze toegankelijk en correct gepositioneerd zijn. De nieuwe CSS-functies, zoals `anchor` en `@position-fallback`, bieden extra maatwerkopties voor het verfijnen van de plaatsing en het gedrag van popovers.
Het is echter belangrijk om de browserondersteuning voor deze functies te controleren, vooral de CSS-properties, omdat ze mogelijk nog niet in alle browsers worden ondersteund. [Bekijk MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position-anchor) voor de laatste informatie en overweeg om progressieve verbeteringstechnieken te gebruiken indien nodig.
Al met al zijn de Popover API en gerelateerde CSS-functies waardevolle tools voor het maken van gebruiksvriendelijke en toegankelijke tooltips en popovers. Naarmate de browserondersteuning verbetert, kunnen we verwachten dat deze functies op grotere schaal worden toegepast. Persoonlijk ben ik enthousiast om hiermee aan de slag te gaan en eindelijk afscheid te nemen van al die npm-packages en custom oplossingen!
[← Alle blogposts](/nl/blog.md)
[Terug naar boven](#top)