Beschikbaarheidspil met tooltip New
Honest scarcity in one pill: "2 spots left in November" with a pulsing dot. Hover, focus or tap shows a tooltip with the schedule and Esc closes it. Variants: last spot, month full and loading. Tooltip is pure CSS (:hover and :focus-visible), a small script handles tapping and Esc. Wire the number to your real schedule.
Badkamers De Waal, Breda
We bouwen 6 badkamers per maand. November: 4 vergeven, 2 vrij.
Bijgewerkt ma 6 okt · daarna eerst weer in januari
Laatste plek in novemberNovember vol · december 3 vrij
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.
<!-- Beschikbaarheidspil met tooltip · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bsp"><div class="bsp__w">
<button class="bsp__pil" type="button" aria-expanded="false"><i class="bsp__dot"></i>Nog 2 plekken in november</button>
<div class="bsp__tip" role="tooltip"><p class="bsp__tt">Badkamers De Waal, Breda</p><p>We bouwen 6 badkamers per maand. November: 4 vergeven, 2 vrij.</p><p class="bsp__slots" aria-label="4 van 6 plekken bezet"><i class="is-b"></i><i class="is-b"></i><i class="is-b"></i><i class="is-b"></i><i></i><i></i></p><p class="bsp__fijn">Bijgewerkt ma 6 okt · daarna eerst weer in januari</p></div>
</div>
<div class="bsp__var" aria-label="Varianten"><span class="bsp__mini bsp__mini--laatst"><i class="bsp__dot"></i>Laatste plek in november</span><span class="bsp__mini bsp__mini--vol"><i class="bsp__dot"></i>November vol · december 3 vrij</span><span class="bsp__mini bsp__mini--laden" aria-label="Beschikbaarheid laden"><i></i></span></div></div>
</div>/* Beschikbaarheidspil met tooltip · NedDev · eigen werk. */
.bsp{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(70px,28%,100px);background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;padding:10px;box-sizing:border-box}
.bsp__w{position:relative;margin-top:-58px}
.bsp__pil{display:inline-flex;align-items:center;gap:9px;font:600 14px/1 'Switzer',sans-serif;padding:11px 17px 11px 14px;border-radius:999px;border:1px solid rgba(10,10,10,.14);background:#fff;color:#0a0a0a;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.bsp__pil:hover{border-color:#0a0a0a}
.bsp__pil:active{transform:translateY(1px)}
.bsp__pil:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.bsp__dot{position:relative;width:8px;height:8px;border-radius:50%;background:#1f8a4c;flex:none}
.bsp__dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:bsp-puls 2s cubic-bezier(.2,.6,.4,1) infinite}
@keyframes bsp-puls{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(3);opacity:0}}
.bsp__tip{position:absolute;left:50%;top:calc(100% + 10px);width:240px;transform:translate(-50%,-4px);background:#0a0a0a;color:#fff;border-radius:6px;padding:11px 13px;font-size:12px;line-height:1.45;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility 0s .16s;z-index:3;box-sizing:border-box}
.bsp__tip::before{content:'';position:absolute;left:50%;top:-5px;width:10px;height:10px;background:#0a0a0a;transform:translateX(-50%) rotate(45deg)}
.bsp__tip p{margin:0 0 6px}
.bsp__tt{font-weight:700}
.bsp__fijn{font:500 10px 'JetBrains Mono',monospace;color:#bdbdbd;margin:0!important}
.bsp__slots{display:flex;gap:4px}
.bsp__slots i{flex:1;height:6px;border-radius:2px;background:#3a3a3a}
.bsp__slots i.is-b{background:#F5480F}
.bsp__w:hover .bsp__tip,.bsp__pil:focus-visible+.bsp__tip,.bsp__w.is-open .bsp__tip{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .16s,transform .16s}
.bsp__w.is-dicht .bsp__tip{opacity:0;visibility:hidden}
.bsp__var{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.bsp__mini{display:inline-flex;align-items:center;gap:7px;font:600 11px/1 'Switzer',sans-serif;padding:7px 11px 7px 9px;border-radius:999px;background:#fff;border:1px solid rgba(10,10,10,.12)}
.bsp__mini--laatst .bsp__dot{background:#e05a0c}
.bsp__mini--vol{color:#555}
.bsp__mini--vol .bsp__dot{background:#9a9a9a}
.bsp__mini--vol .bsp__dot::after{display:none}
.bsp__mini--laden{width:150px;height:25px;padding:0 10px;box-sizing:border-box}
.bsp__mini--laden i{display:block;width:100%;height:8px;border-radius:4px;background:linear-gradient(90deg,#ebe8e3 0 30%,#f7f6f4 50%,#ebe8e3 70%) 0 0/300% 100%;animation:bsp-laad 1.4s linear infinite}
@keyframes bsp-laad{to{background-position:-150% 0}}
@media (max-width:420px){.bsp__mini{font-size:10px;padding:6px 9px 6px 8px}.bsp__mini--laden{width:110px}}
@media (prefers-reduced-motion: reduce){.bsp__dot::after,.bsp__mini--laden i{animation:none}.bsp__tip{transition:none}}// Beschikbaarheidspil met tooltip · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.bsp')||root;
var w=root.querySelector('.bsp__w'),pil=root.querySelector('.bsp__pil'),tip=root.querySelector('.bsp__tip');
tip.id='bsp-tip-'+Math.random().toString(36).slice(2,8);pil.setAttribute('aria-describedby',tip.id);
function open(v){w.classList.toggle('is-open',v);pil.setAttribute('aria-expanded',v?'true':'false');if(v)w.classList.remove('is-dicht');}
pil.addEventListener('click',function(){open(!w.classList.contains('is-open'));});
pil.addEventListener('blur',function(){open(false);w.classList.remove('is-dicht');});
w.addEventListener('mouseleave',function(){w.classList.remove('is-dicht');});
root.addEventListener('keydown',function(e){if(e.key==='Escape'){open(false);w.classList.add('is-dicht');}});
document.addEventListener('pointerdown',function(e){if(!w.contains(e.target))open(false);});
}
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 →