Tooltip

<div class="wrap">
  <button class="icon-btn" id="ib" aria-describedby="tp">💾</button>
  <span class="tip" id="tp" role="tooltip">저장</span>
  <i class="cursor" id="cur"></i>
</div>

.wrap{position:relative;display:grid;place-items:center;width:100%;height:100%}
.icon-btn{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:18px;cursor:pointer}
.tip{position:absolute;left:50%;bottom:calc(50% + 34px);transform:translate(-50%,4px);background:var(--fg);color:var(--bg);
  font-size:11px;font-weight:600;padding:5px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s}
.tip[data-show]{opacity:1;transform:translate(-50%,0)}
.cursor{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);opacity:.85;
  top:calc(50% + 40px);left:calc(50% + 40px);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  transition:top .5s ease,left .5s ease}

const btn = document.getElementById('ib'), tip = document.getElementById('tp'), cur = document.getElementById('cur');
function showReal() { tip.setAttribute('data-show', ''); }
function hideReal() { tip.removeAttribute('data-show'); }
btn.addEventListener('mouseenter', showReal);
btn.addEventListener('mouseleave', hideReal);
btn.addEventListener('focus', showReal);
btn.addEventListener('blur', hideReal);
let auto = true;
btn.addEventListener('pointerdown', () => auto = false);
function loop() {
  if (!auto) return;
  cur.style.top = '50%'; cur.style.left = '50%'; cur.style.transform = 'translate(-50%,-50%)';
  setTimeout(() => { if (auto) showReal(); }, 520);
  setTimeout(() => {
    if (!auto) return; hideReal();
    cur.style.top = 'calc(50% + 40px)'; cur.style.left = 'calc(50% + 40px)'; cur.style.transform = 'none';
    setTimeout(loop, 900);
  }, 1900);
}
loop();