툴팁

<span class="tooltip-wrap">
  <button type="button" aria-describedby="tip-copy">링크 복사</button>
  <div role="tooltip" id="tip-copy" hidden>현재 주소를 클립보드에 복사합니다 (Ctrl+C)</div>
</span>

var wrap = document.getElementById('wrap');
var trigger = document.getElementById('trigger');
var tip = document.getElementById('tip');
var hovering = false, focused = false, dismissed = false, timer;

function show() { if (!dismissed) { clearTimeout(timer); tip.hidden = false; } }
function hideSoon() {
  clearTimeout(timer);
  timer = setTimeout(function () {
    if (!hovering && !focused) tip.hidden = true;
  }, 300);
}

// 감싼 요소에 호버를 걸면 포인터를 툴팁 위로 옮겨도 유지됩니다(호버 가능).
wrap.addEventListener('mouseenter', function () { hovering = true; show(); });
wrap.addEventListener('mouseleave', function () {
  hovering = false;
  if (!focused) dismissed = false;
  hideSoon();
});
trigger.addEventListener('focus', function () { focused = true; show(); });
trigger.addEventListener('blur', function () {
  focused = false;
  if (!hovering) dismissed = false;
  hideSoon();
});

// Esc: 포인터·포커스를 옮기지 않고 닫을 수 있습니다(닫기 가능).
document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape' && !tip.hidden) {
    dismissed = true;
    tip.hidden = true;
  }
});

<span class="toggletip">
  <button type="button" id="tt-btn" aria-label="배송비 정보">i</button>
  <span role="status" id="tt-out"></span>
</span>

var btn = document.getElementById('tt-btn');
var out = document.getElementById('tt-out');

btn.addEventListener('click', function () {
  out.textContent = '';                 // 다시 눌러도 읽히도록 비운 뒤
  setTimeout(function () {
    out.textContent = '3만 원 이상 주문하면 배송비가 무료입니다.';
  }, 100);
});
btn.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') out.textContent = '';
});
btn.addEventListener('blur', function () { out.textContent = ''; });