Toast Position Grid
A 6-position grid that fires a toast in any screen corner.
Requires Bootstrap 5. Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><div><div class="d-grid gap-1" style="grid-template-columns:repeat(3,1fr);max-width:240px" id="tpGrid">
<button class="btn btn-sm btn-outline-primary" data-p="top-0 start-0">↖</button><button class="btn btn-sm btn-outline-primary" data-p="top-0 start-50 translate-middle-x">↑</button><button class="btn btn-sm btn-outline-primary" data-p="top-0 end-0">↗</button>
<button class="btn btn-sm btn-outline-primary" data-p="bottom-0 start-0">↙</button><button class="btn btn-sm btn-outline-primary" data-p="bottom-0 start-50 translate-middle-x">↓</button><button class="btn btn-sm btn-outline-primary" data-p="bottom-0 end-0">↘</button>
</div><div class="toast-container position-fixed p-3" id="tpWrap"></div></div>document.querySelectorAll('#tpGrid [data-p]').forEach(function(b){b.onclick=function(){var w=document.getElementById('tpWrap');w.className='toast-container position-fixed p-3 '+b.dataset.p;var el=document.createElement('div');el.className='toast align-items-center text-bg-dark border-0';el.innerHTML='<div class="toast-body">Toast here ✓</div>';w.appendChild(el);var t=new bootstrap.Toast(el,{delay:1500});t.show();el.addEventListener('hidden.bs.toast',function(){el.remove()})}});Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.