[{"data":1,"prerenderedAt":252},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-blog-slug-the-popover-api-your-new-best-friend-for-tooltips-i18n-slugs":132,"language-blog-slug-nl-the-popover-api-your-new-best-friend-for-tooltips":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140903","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140909","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140910","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140911","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140913","Over ons",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"NnUFs73_Saa8XE_jYZFHcw","Werken bij",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185271",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185272",{"__typename":50},{"id":75,"title":53,"link":76},"144185273",{"__typename":55},{"id":78,"title":79,"link":80},"144185274","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185275",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185276",{"__typename":38},{"id":89,"title":90,"link":91},"144185277","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licentie en disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","PDF bestand van De Voorhoede privacy statement","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455427-vh-isms-007-privacy-statement-de-voorhoede-nl.pdf",[100,112,122],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png",null,404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":118},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":104,"width":116,"height":117},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png",627,480,{"__typename":108,"id":119,"title":120,"url":121},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":123,"image":124,"link":127},"MT5SCyNxSTSr_v5eeATMZw",{"url":125,"alt":104,"width":126,"height":126},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png",518,{"id":128,"title":129,"link":130},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":131},"impact\u002Fdigitale-producten-privacy-by-design",[133,136],{"locale":134,"value":135},"en","the-popover-api-your-new-best-friend-for-tooltips",{"locale":137,"value":135},"nl",{"page":139},{"slug":135,"i18nSlugs":140,"social":143,"title":144,"subtitle":79,"isArchived":146,"headerIllustration":147,"date":151,"authors":152,"introTitle":161,"items":162,"pivots":249,"relatedBlogPosts":250,"tags":251,"onMountedScript":166,"onUnmountedScript":166},[141,142],{"locale":134,"value":135},{"locale":137,"value":135},{"title":144,"description":145,"image":104},"The Popover API: Your New Best Friend for Tooltips","Discover how the Popover API and new CSS features simplify tooltip creation, making them accessible and well-positioned across all major browsers",false,{"url":148,"alt":104,"width":149,"height":150},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1726231675-20240808-clippy-deal.svg",639,545,"2024-10-07T15:36:10.707+02:00",[153],{"name":154,"lastName":155,"slug":156,"image":157},"Sjoerd","Beentjes","sjoerd",{"url":158,"alt":104,"width":159,"height":160},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,"Moeiteloos tooltips maken met de Popover API en nieuwe CSS-functies",[163,168,172,182,186,190,195,198,206,210,214,218,222,225,228,236,239,245],{"__typename":164,"id":165,"title":166,"body":167},"TextSectionRecord","VvxT01GDSgK4bRyJ2dKAVw","","\u003Cp>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.\u003Cbr \u002F>\u003Cb>\u003Cbr \u002F>\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">De Popover API, ondersteund door alle grote browsers, vereenvoudigt het maken van tooltips. Bovendien bieden nieuwe CSS-functies zoals \u003C\u002Fspan>\u003Ccode>\u003Cb>anchor\u003C\u002Fb>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\"> en \u003C\u002Fspan>\u003Ccode>\u003Cb>@position-try\u003C\u002Fb>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\"> 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.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":164,"id":169,"title":170,"body":171},"TVOOdGpfT6mpTerJBzP6RA","De uitdagingen van het maken van tooltips","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Het implementeren van tooltips is ingewikkelder dan het op het eerste gezicht lijkt. Developers moeten verschillende UI-problemen aanpakken, zoals:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Col>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">De tooltip goed associëren met het element dat deze triggert\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Voorkomen dat de tooltip op onverwachte plekken verschijnt\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Zorgen dat de tooltip niet buiten het viewport komt\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Het toevoegen van de ARIA-attributen voor toegankelijkheid\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Fol>",{"__typename":173,"id":174,"image":175,"caption":180,"fullWidth":146,"captionPosition":181},"ImageRecord","YHGZZkO2THCHXbCeimWXww",{"url":176,"alt":177,"width":178,"height":179},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1726231099-image1.png","Screenshots van tooltips die op een verkeerde manier renderen",1715,1579,"Voorbeelden van hoe een tooltip er vreemd uit kan zien","bottom",{"__typename":164,"id":183,"title":184,"body":185},"SjZKblFnSlmM-p6BJb7Hxg","De Popover API begrijpen","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">De Popover API is veelzijdig en kan voor verschillende doeleinden worden gebruikt, waaronder:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Col>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Tooltips\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Complexe gebruikersinteractieve elementen zoals actiemenu's\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Aangepaste toastmeldingen\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Fol>",{"__typename":164,"id":187,"title":188,"body":189},"exKCmoaWQ6yELNMjY1-dKw","De Popover API implementeren","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Hier is een eenvoudig voorbeeld om te laten zien hoe je kunt beginnen:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":191,"id":192,"language":193,"body":194},"CodeBlockRecord","bTCP0SjtQoel7swCBD_wog","html","\u003Cbutton id=\"popover-trigger\" popovertarget=\"popover\">More information\u003C\u002Fbutton>\n\n\u003Cdiv id=\"popover\" popover>\n    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.\n\u003C\u002Fdiv>",{"__typename":164,"id":196,"title":166,"body":197},"JPnbBpstQvqF798Wtxi11Q","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Deze code maakt een tooltip die extra informatie weergeeft wanneer deze wordt getriggerd. Het werkt goed, maar de styling laat wat te wensen over.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":173,"id":199,"image":200,"caption":205,"fullWidth":146,"captionPosition":181},"Bkn7VcEXR2StNonasmCpCg",{"url":201,"alt":202,"width":203,"height":204},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1726231308-image2.png","Een voorbeeld van de Popover API zonder styling",1018,454,"Hoe de popover eruit ziet in de meeste browsers",{"__typename":164,"id":207,"title":208,"body":209},"BPt8HzYhQk2oAvBiAa40eg","Tooltips positioneren met CSS","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Een van de uitdagingen met tooltips is het positioneren ervan ten opzichte van hun trigger-element. Deze berekening houdt rekening met verschillende factoren, zoals:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Col>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Aan welke kant van het trigger-element moet de tooltip worden weergegeven?\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Waar bevindt het midden van de tooltip zich ten opzichte van het midden van de trigger?\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Is er genoeg ruimte om de tooltip weer te geven?\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">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:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":191,"id":211,"language":212,"body":213},"ABuJYsSsSlCChhg9xicsLw","css","#popover-trigger {\n  anchor-name: --popover-trigger;\n}\n\n#popover {\n  position: absolute;\n  max-width: 250px;\n  min-width: 200px;\n  position-anchor: --popover-trigger;\n  inset-area: right;\n}",{"__typename":191,"id":215,"language":216,"body":217},"daUu34lgRUeA0fvjIICZcQ","javascript","const popover = document.querySelector(\"[popover]\");\nconst trigger = document.querySelector(\"[popovertarget]\");\n\ntrigger.addEventListener(\"mouseenter\", (event) => {\n  popover.showPopover();\n});\n\ntrigger.addEventListener(\"mouseleave\", (event) => {\n  popover.hidePopover();\n});",{"__typename":164,"id":219,"title":220,"body":221},"eWXRP8B3QP-Ht7_UuqiDIg","Omgaan met viewport overflow","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Om ervoor te zorgen dat de tooltip correct werkt wanneer deze niet binnen het viewport past, kunnen we een combinatie van de \u003C\u002Fspan>\u003Cb>\u003Ccode>position-try\u003C\u002Fcode> \u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">rule en de \u003C\u002Fspan>\u003Cb>\u003Ccode>@position-try\u003C\u002Fcode> \u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">at-rule gebruiken:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":191,"id":223,"language":212,"body":224},"LBgdPeXxSk6goSJXMfClkg","#popover {\n  ...\n  --margin: 8px;\n  max-width: 250px;\n  min-width: 200px;\n  margin: var(--margin);\n  position-anchor: --popover-trigger;\n  inset-area: right;\n  position-try-options: --bottom;\n}\n\n@position-try --bottom {\n  margin: var(--margin);\n  inset-area: bottom;\n}",{"__typename":164,"id":226,"title":166,"body":227},"XSJwp26LQ_ePIoEnycbwMg","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Dit is wat elke eigenschap doet:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>position-anchor: --popover-trigger;\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">: Verankert de tooltip aan het trigger-element met behulp van een aangepast ankerpunt.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>inset-area: right;\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">: Positioneert de tooltip aanvankelijk rechts van het trigger-element.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>position-try-options: --bottom;\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">: Geeft aan dat de browser een alternatieve positie moet proberen als de tooltip buiten het viewport zou vallen.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>@position-try --bottom { ... }\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">: 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.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Met wat extra styling ziet het resultaat er als volgt uit:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":173,"id":229,"image":230,"caption":235,"fullWidth":146,"captionPosition":181},"Fc2T97ChTpOuMZYyV8hb2g",{"url":231,"alt":232,"width":233,"height":234},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1726231477-image3.gif","Een tooltip die zich verplaatst wanneer deze buiten de viewport dreigt te komen",774,398,"Hoe de tooltip zich gedraagt wanneer deze buiten de viewport valt.",{"__typename":164,"id":237,"title":166,"body":238},"djnAKcG6Q8Gri6BgexHXUQ","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Eindresultaat:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":240,"id":241,"url":242,"title":243,"caption":166,"previewType":244},"CodePenBlockRecord","UBXwOxaqSpWWUNtc95wBqA","https:\u002F\u002Fcodepen.io\u002Fsjoerdb\u002Fpen\u002FMWMGbmQ","Popover Demo","codepen",{"__typename":164,"id":246,"title":247,"body":248},"Snd_OyurS-SyVHJljUZ-Gg","Conclusie","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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 \u003C\u002Fspan>\u003Ccode>\u003Cb>anchor\u003C\u002Fb>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\"> en \u003C\u002Fspan>\u003Ccode>\u003Cb>@position-fallback\u003C\u002Fb>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\">, bieden extra maatwerkopties voor het verfijnen van de plaatsing en het gedrag van popovers.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">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. \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fposition-anchor\">\u003Cspan style=\"font-weight: 400;\">Bekijk MDN\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> voor de laatste informatie en overweeg om progressieve verbeteringstechnieken te gebruiken indien nodig.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">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!\u003C\u002Fspan>\u003C\u002Fp>",[],[],[],1776256147588]