Uitlegballon bij een term New

Explanation balloon with a pointer next to a term or info icon, in a soft tone for care or childcare. Opens on hover (with a short delay and stays open when you move to the balloon), on keyboard focus and on tap; Esc or a tap elsewhere closes it (WCAG 1.4.13). Real buttons with aria-describedby and role="tooltip". A small script places the balloon above or below the term inside the container and aligns the pointer; CSS anchor positioning can take this over later.

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.

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →