Natuurlijk! Hier zijn aanbevelingen voor het ontwerpen van een responsief, toegankelijk en gebruiksvriendelijk tooltip-systeem: 1. Positionering - Gebruik CSS-positionering zoals `absolute` of `fixed` om de tooltip netjes naast of boven het element te plaatsen. - Gebruik JavaScript of CSS (bijvoorbeeld met `:hover` en `:focus`) om de positie dynamisch aan te passen aan de locatie van het element, zodat de tooltip niet buiten het scherm valt. - Overweeg het gebruik van een bibliotheek of aangepaste functies die de positie automatisch aanpassen afhankelijk van de ruimte rondom het element (bijvoorbeeld boven, onder, links, rechts). 2. Zichtbaarheid - Verberg de tooltip standaard met `opacity: 0` en `visibility: hidden`. - Maak de tooltip zichtbaar bij hover (`:hover`) of focus (`:focus`) met overgangen voor soepele animaties, bijvoorbeeld: ```css .tooltip { opacity: 0; visibility: hidden; transition: opacity 0.3s ease; position: absolute; z-index: 1000; } .tooltip.show { opacity: 1; visibility: visible; } ``` - Gebruik JavaScript om de `show` klasse toe te voegen/verwijderen bij interacties. 3. Toegankelijkheid - Zorg dat de tooltip ook zichtbaar wordt bij focus, zodat toetsenbordgebruikers er ook toegang toe hebben: ```css .element:focus + .tooltip { opacity: 1; visibility: visible; } ``` - Gebruik `aria-describedby` of `aria-label` op de elementen die de tooltips activeren, zodat schermlezers de informatie kunnen voorlezen. - Voeg `tabindex="0"` toe aan elementen die een tooltip hebben, zodat ze focusbaar zijn. - Zorg dat de tooltip-inhoud begrijpelijk en kort is, en vermijd het gebruik van alleen visuele cues. 4. Responsiviteit op mobiele apparaten - Voor mobiele telefoons en tablets kunnen hover niet altijd werken. Gebruik daarom `:focus` of tap-gebaseerde interacties. - Overweeg het gebruik van een klik of tap om de tooltip te tonen, en deze te sluiten door opnieuw te tikken of ergens anders te tikken. - Zorg dat de tooltip niet te groot wordt, en dat de tekst goed leesbaar is op kleine schermen (gebruik bijvoorbeeld `font-size: 14px` en voldoende padding). 5. Extra tips - Gebruik media queries om de tooltip-stijlen aan te passen op verschillende schermformaten. - Overweeg het gebruik van aria-rollen zoals `role="tooltip"` en `aria-hidden` om de toegankelijkheid te verbeteren. - Test de tooltip op verschillende apparaten en met schermlezers om de gebruikservaring te optimaliseren. Voorbeeld HTML-structuur en CSS: ```html <div class="tooltip-container" tabindex="0" aria-describedby="tip1"> Element met tooltip <div id="tip1" class="tooltip" role="tooltip"> Dit is de contextuele informatie. </div> </div> ``` ```css .tooltip { position: absolute; background-color: zwart; color: wit; padding: 8px; border-radius: 4px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 1000; } .tooltip-container:focus .tooltip, .tooltip-container:hover .tooltip { opacity: 1; visibility: visible; } ``` Kortom: zorg voor dynamische positionering, soepele overgangen, toetsenbordtoegankelijkheid en responsieve styling voor een optimale gebruikerservaring op alle apparaten.

Hier zijn aanbevelingen voor een responsief en toegankelijk tooltip-systeem: ## HTML-structuur verbeteringen ```html <!-- Voeg aria-labels en rol toe voor toegankelijkheid --> <div class="tooltip-container"> <button class="tooltip-trigger" aria-describedby="tooltip-1" aria-expanded="false"> Hover/tap mij </button> <div id="tooltip-1" class="tooltip" role="tooltip" aria-hidden="true"> Tooltip tekst </div> </div> ``` ## CSS-verbeteringen ```css .tooltip { background-color: #000; color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 14px; line-height: 1.4; max-width: 250px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Positionering */ position: absolute; z-index: 1000; /* Standaard verborgen */ opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .tooltip.active { opacity: 1; visibility: visible; } /* Responsive positionering */ .tooltip.top { bottom: 100%; margin-bottom: 8px; } .tooltip.bottom { top: 100%; margin-top: 8px; } .tooltip.left { right: 100%; margin-right: 8px; } .tooltip.right { left: 100%; margin-left: 8px; } /* Mobiele optimalisaties */ @media (max-width: 768px) { .tooltip { max-width: 200px; font-size: 13px; padding: 6px 10px; } /* Zorg dat tooltips niet buiten scherm vallen */ .tooltip-container { position: relative; } } ``` ## JavaScript-functionaliteit ```javascript class TooltipSystem { constructor() { this.init(); } init() { document.querySelectorAll('.tooltip-trigger').forEach(trigger => { // Hover voor desktop trigger.addEventListener('mouseenter', this.showTooltip.bind(this)); trigger.addEventListener('mouseleave', this.hideTooltip.bind(this)); // Tap voor touch devices trigger.addEventListener('click', this.toggleTooltip.bind(this)); trigger.addEventListener('touchstart', this.handleTouch.bind(this)); }); // Sluit tooltips bij klik buiten document.addEventListener('click', this.closeAllTooltips.bind(this)); } showTooltip(e) { if ('ontouchstart' in window) return; // Skip hover op touch devices const trigger = e.currentTarget; const tooltip = this.getTooltip(trigger); this.positionTooltip(trigger, tooltip); this.setTooltipState(tooltip, true); } toggleTooltip(e) { e.stopPropagation(); const trigger = e.currentTarget; const tooltip = this.getTooltip(trigger); const isActive = tooltip.classList.contains('active'); this.closeAllTooltips(); if (!isActive) { this.positionTooltip(trigger, tooltip); this.setTooltipState(tooltip, true); } } positionTooltip(trigger, tooltip) { const rect = trigger.getBoundingClientRect(); const viewport = this.getViewportSize(); // Bepaal beste positie gebaseerd op beschikbare ruimte if (rect.top > tooltip.offsetHeight + 20) { tooltip.classList.add('top'); } else if (viewport.height - rect.bottom > tooltip.offsetHeight + 20) { tooltip.classList.add('bottom'); } else { tooltip.classList.add('top'); // fallback } } } ``` ## Toegankelijkheidsfuncties 1. **Keyboard navigation**: Ondersteun Tab-toets om tooltips te activeren 2. **Screen readers**: Gebruik `aria-describedby` en `role="tooltip"` 3. **Focus management**: Sluit tooltips bij ESC-toets 4. **Kleurcontrast**: Zorg voor minimaal contrast van 4.5:1 5. **Touch targets**: Minimaal 44×44px voor mobiele interactie ## Belangrijkste aandachtspunten: - Gebruik hover alleen voor desktop, tap voor mobiel - Voorkom dat tooltips buiten het viewport vallen - Zorg voor voldoende vertraging bij hover om per ongeluk activeren te voorkomen - Test met echte screen readers en toetsenbordnavigatie - Houd tooltip-tekst kort en relevant voor mobiel gebruik Deze aanpak zorgt voor een consistente ervaring across alle devices en voldoet aan WCAG-richtlijnen.