src/components/ui/Tooltip.astro
---
// Tooltip, recovered from blurr-components.pages.dev
---
<div class="preview-wrapper--centered" style="min-height:300px"> <div style="display:flex;gap:2.5rem;flex-wrap:wrap;align-items:center;justify-content:center"> <span class="tt tt--top tt--delay" data-component="tooltip" data-tip="Boven de trigger"> <button style="background:var(--color-accent,#6366f1);color:#fff;border:none;padding:0.5rem 1rem;border-radius:0.5rem;font-weight:700;font-size: 1rem;cursor:pointer">Top</button> <span class="tt__bubble" role="tooltip">Boven de trigger</span> </span> <span class="tt tt--right tt--delay" data-component="tooltip" data-tip="Rechts van de trigger"> <button style="background:var(--color-accent,#6366f1);color:#fff;border:none;padding:0.5rem 1rem;border-radius:0.5rem;font-weight:700;font-size: 1rem;cursor:pointer">Right</button> <span class="tt__bubble" role="tooltip">Rechts van de trigger</span> </span> <span class="tt tt--bottom tt--delay" data-component="tooltip" data-tip="Onder de trigger"> <button style="background:var(--color-accent,#6366f1);color:#fff;border:none;padding:0.5rem 1rem;border-radius:0.5rem;font-weight:700;font-size: 1rem;cursor:pointer">Bottom</button> <span class="tt__bubble" role="tooltip">Onder de trigger</span> </span> <span class="tt tt--left tt--delay" data-component="tooltip" data-tip="Links van de trigger"> <button style="background:var(--color-accent,#6366f1);color:#fff;border:none;padding:0.5rem 1rem;border-radius:0.5rem;font-weight:700;font-size: 1rem;cursor:pointer">Left</button> <span class="tt__bubble" role="tooltip">Links van de trigger</span> </span> </div> </div>
<style>
,:before,:after{box-sizing:border-box;margin:0;padding:0}
.preview-wrapper--centered{display:flex;align-items:center;justify-content:center;min-height:200px;padding:2rem;background:#f9f9fb}
</style>