Uitlegballon bij een term Nieuw
Uitlegballonnetje met een pijlpunt bij een begrip of info-icoon, in een zachte toon voor zorg of kinderopvang. Opent bij hover (met korte vertraging en blijft open als je de muis naar de ballon beweegt), bij toetsenbordfocus en bij een tik; Esc of een tik ernaast sluit (WCAG 1.4.13). Echte knoppen met aria-describedby en role="tooltip". Een klein script plaatst de ballon boven of onder de term binnen de container en zet de pijl op de juiste plek; CSS anchor positioning kan dit later overnemen.
Wat kost opvang bij Het Speelnest?
Je betaalt € 10,25 per uur voor de . Een groot deel krijg je terug via de .
Zit je kind op school? Dan kan het naar de BSO op dezelfde locatie in Amersfoort.
Opvang voor kinderen van 0 tot 4 jaar, op werkdagen van 7.30 tot 18.30 uur.
Een bijdrage van de overheid. Hoeveel je terugkrijgt hangt af van je inkomen en het aantal uren. Je vraagt het aan bij Dienst Toeslagen.
Buitenschoolse opvang: voor en na school en in de vakanties, voor kinderen van 4 tot 13 jaar.
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- Uitlegballon bij een term · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="spb">
<div class="spb__card">
<h3 class="spb__h">Wat kost opvang bij Het Speelnest?</h3>
<p class="spb__p">Je betaalt € 10,25 per uur voor de <button class="spb__term" type="button" aria-describedby="spb-tip-1" data-tip="spb-tip-1">dagopvang</button>. Een groot deel krijg je terug via de <button class="spb__term" type="button" aria-describedby="spb-tip-2" data-tip="spb-tip-2">kinderopvangtoeslag</button>.</p>
<p class="spb__p">Zit je kind op school? Dan kan het naar de BSO <button class="spb__info" type="button" aria-label="Wat is BSO?" aria-describedby="spb-tip-3" data-tip="spb-tip-3"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="8.2"/><path d="M10 9v5M10 6.2v.2"/></svg></button> op dezelfde locatie in Amersfoort.</p>
</div>
<div class="spb__tip" id="spb-tip-1" role="tooltip" hidden>Opvang voor kinderen van 0 tot 4 jaar, op werkdagen van 7.30 tot 18.30 uur.</div>
<div class="spb__tip" id="spb-tip-2" role="tooltip" hidden>Een bijdrage van de overheid. Hoeveel je terugkrijgt hangt af van je inkomen en het aantal uren. Je vraagt het aan bij Dienst Toeslagen.</div>
<div class="spb__tip" id="spb-tip-3" role="tooltip" hidden>Buitenschoolse opvang: voor en na school en in de vakanties, voor kinderen van 4 tot 13 jaar.</div>
</div>
</div>/* Uitlegballon bij een term · NedDev · eigen werk. */
.spb{position:absolute;inset:0;background:#eef3f0;color:#14302a;font-family:'Switzer',sans-serif;container-type:size;text-align:left;--spb-bg:#ffffff;--spb-rand:#7fa898;--spb-tekst:#14302a}
.spb *,.spb *::before,.spb *::after{box-sizing:border-box}
.spb__card{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);max-width:460px;margin:0 auto;padding:16px 18px;background:#fff;border:1px solid #cfe0d8;border-radius:4px}
.spb__h{margin:0 0 8px;font:700 clamp(16px,4.6cqi,21px)/1.15 'Switzer',sans-serif;letter-spacing:-.015em}
.spb__p{margin:0 0 6px;font:400 clamp(13px,3.4cqi,15px)/1.55 'Switzer',sans-serif;color:#2c4a43}
.spb__p:last-child{margin-bottom:0}
.spb__term{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:500;text-decoration:underline dotted #4f8a76 1.5px;text-underline-offset:3px;cursor:help;border-radius:4px;transition:color .15s,background-color .15s}
.spb__term:hover,.spb__term[aria-expanded="true"]{color:#0b5a45;background:#e3efe9}
.spb__term:focus-visible{outline:2px solid #2f7a62;outline-offset:2px}
.spb__info{display:inline-grid;place-items:center;width:22px;height:22px;margin:0 1px;padding:0;border:0;background:none;color:#2f7a62;vertical-align:-5px;cursor:help;border-radius:4px;transition:color .15s,background-color .15s}
.spb__info:hover,.spb__info[aria-expanded="true"]{color:#0b5a45;background:#e3efe9}
.spb__info:focus-visible{outline:2px solid #2f7a62;outline-offset:1px}
.spb__info svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.spb__tip{position:absolute;left:0;top:0;z-index:5;width:min(300px,calc(100% - 24px));padding:10px 12px;background:var(--spb-bg);color:var(--spb-tekst);border:1.5px solid var(--spb-rand);border-radius:4px;font:400 13px/1.45 'Switzer',sans-serif;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;--spb-x:50%}
.spb__tip.is-on{opacity:1;transform:none}
.spb__tip.is-onder{transform:translateY(-4px)}
.spb__tip.is-onder.is-on{transform:none}
.spb__tip::after{content:'';position:absolute;left:var(--spb-x);top:100%;width:11px;height:11px;margin:-5px 0 0 -6px;background:var(--spb-bg);border-right:1.5px solid var(--spb-rand);border-bottom:1.5px solid var(--spb-rand);transform:rotate(45deg)}
.spb__tip.is-onder::after{top:auto;bottom:100%;margin:0 0 -6px -6px;transform:rotate(225deg)}
.spb__tip[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.spb__tip,.spb__tip.is-onder{transition:none;transform:none}}// Uitlegballon bij een term · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.spb');if(!w)return;
var trig=[].slice.call(w.querySelectorAll('[data-tip]')),open=null,tShow=null,tHide=null;
function place(b,tip){var wr=w.getBoundingClientRect(),r=b.getBoundingClientRect(),tw=tip.offsetWidth,th=tip.offsetHeight;
var cx=r.left+r.width/2-wr.left,left=Math.max(8,Math.min(wr.width-tw-8,cx-tw/2)),up=r.top-wr.top-th-10,dn=r.bottom-wr.top+10,below=false,top=up;
if(up<6){if(dn+th<=wr.height-6||(wr.height-r.bottom+wr.top)>(r.top-wr.top)){below=true;top=Math.min(dn,wr.height-th-6);}else top=6;}tip.classList.toggle('is-onder',below);tip.style.left=left+'px';tip.style.top=top+'px';tip.style.setProperty('--spb-x',Math.max(12,Math.min(tw-12,cx-left))+'px');}
function show(b){clearTimeout(tHide);clearTimeout(tShow);if(open&&open.b!==b)hide(true);var tip=w.querySelector('#'+b.getAttribute('data-tip'));tip.hidden=false;place(b,tip);b.setAttribute('aria-expanded','true');open={b:b,tip:tip};requestAnimationFrame(function(){tip.classList.add('is-on');});}
function hide(now){clearTimeout(tShow);if(!open)return;var o=open;open=null;o.b.setAttribute('aria-expanded','false');o.tip.classList.remove('is-on');o.tip.hidden=true;}
trig.forEach(function(b){b.setAttribute('aria-expanded','false');var tip=w.querySelector('#'+b.getAttribute('data-tip'));
b.addEventListener('pointerenter',function(e){if(e.pointerType!=='mouse')return;clearTimeout(tHide);tShow=setTimeout(function(){show(b);},120);});
b.addEventListener('pointerleave',function(e){if(e.pointerType!=='mouse')return;clearTimeout(tShow);tHide=setTimeout(hide,220);});
b.addEventListener('focus',function(){show(b);});
b.addEventListener('blur',function(){tHide=setTimeout(hide,120);});
b.addEventListener('click',function(){if(open&&open.b===b&&b.dataset.tap){hide();b.dataset.tap='';}else{show(b);b.dataset.tap='1';}});
tip.addEventListener('pointerenter',function(){clearTimeout(tHide);});
tip.addEventListener('pointerleave',function(e){if(e.pointerType==='mouse')tHide=setTimeout(hide,220);});});
w.addEventListener('keydown',function(e){if(e.key==='Escape'&&open){hide();e.stopPropagation();}});
document.addEventListener('pointerdown',function(e){if(open&&!open.b.contains(e.target)&&!open.tip.contains(e.target)){hide();trig.forEach(function(b){b.dataset.tap='';});}});
}
init(document.querySelector('.jouw-container'));Meer uit componenten
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →