Directional Tooltips
Four buttons whose tooltips slide in from the top, left, right or bottom on hover or focus and dismiss with the escape key.
Preview and code
index.html
<div class="tp"><button class="t top" data-tip="Add to favourites"><svg viewBox="0 0 24 24"><path d="M12 19V5M6 11l6-6 6 6"/></svg>Top</button><button class="t left" data-tip="Go back"><svg viewBox="0 0 24 24"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>Left</button><button class="t right" data-tip="Next step"><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg>Right</button><button class="t bottom" data-tip="Download file"><svg viewBox="0 0 24 24"><path d="M12 5v14M6 13l6 6 6-6"/></svg>Bottom</button><p>Hover or focus. Press Esc to dismiss.</p></div>
styles.css
.tp{display:grid;grid-template-columns:repeat(3,auto);grid-template-rows:repeat(3,auto);gap:20px 70px;justify-items:center;align-items:center;font-family:system-ui,-apple-system,sans-serif;padding:20px 40px}.tp p{grid-column:1/4;margin:6px 0 0;font-size:12px;color:#7a7a7a}.t{position:relative;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:10px;border:1px solid #2a2a2a;background:#1b1b1b;color:#f1f1f1;font:600 12px/1 inherit;cursor:pointer;transition:background .2s}.t:hover{background:#242424}.t svg{width:13px;height:13px;fill:none;stroke:#9a9a9a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.t.top{grid-column:2;grid-row:1}.t.left{grid-column:1;grid-row:2}.t.right{grid-column:3;grid-row:2}.t.bottom{grid-column:2;grid-row:3}.t::after{content:attr(data-tip);position:absolute;padding:7px 10px;border-radius:8px;background:#f3f3f3;color:#111;font:600 11.5px/1 inherit;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.3,1.4,.5,1);z-index:3}.t.top::after{bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px) scale(.9)}.t.bottom::after{top:calc(100% + 10px);left:50%;transform:translate(-50%,-6px) scale(.9)}.t.left::after{right:calc(100% + 10px);top:50%;transform:translate(6px,-50%) scale(.9)}.t.right::after{left:calc(100% + 10px);top:50%;transform:translate(-6px,-50%) scale(.9)}.t:hover::after,.t:focus-visible::after{opacity:1}.t.top:hover::after,.t.top:focus-visible::after,.t.bottom:hover::after,.t.bottom:focus-visible::after{transform:translate(-50%,0) scale(1)}.t.left:hover::after,.t.left:focus-visible::after,.t.right:hover::after,.t.right:focus-visible::after{transform:translate(0,-50%) scale(1)}.tp.off .t::after{opacity:0!important}
script.js
(function(){var r=document.querySelector('.tp');document.addEventListener('keydown',function(e){if(e.key==='Escape'){r.classList.add('off')}});r.addEventListener('mouseleave',function(){r.classList.remove('off')});r.addEventListener('focusout',function(){r.classList.remove('off')})})();