Tooltip Copy

<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <span class="ic" id="bi">i</span>
    <div class="tip" id="btip"><p id="bt"></p></div>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <span class="ic" id="gi">i</span>
    <div class="tip" id="gtip"><p id="gt"></p></div>
    <p class="why" id="gw"></p></div>
</div>

.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:16px 14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.mark{position:absolute;top:10px;right:12px;font:800 16px/1 system-ui;color:var(--accent-2)}
.good .mark{color:var(--accent-3)}
.label{position:absolute;top:10px;left:12px;font:700 10px/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.ic{margin-top:20%;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--muted);color:var(--muted);display:grid;place-items:center;font:700 11px/1 serif}
.tip{max-width:88%;border-radius:9px;border:1px solid var(--line);background:var(--bg);padding:8px 10px;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.tip.show{opacity:1;transform:translateY(0)}
.tip p{margin:0;font:600 11px/1.4 -apple-system,sans-serif;color:var(--fg);text-align:center}
.why{margin:auto 0 0;font:500 11px/1.3 -apple-system,sans-serif;color:var(--muted);text-align:center}

const bt = document.getElementById('bt'), bw = document.getElementById('bw'), btip = document.getElementById('btip');
const gt = document.getElementById('gt'), gw = document.getElementById('gw'), gtip = document.getElementById('gtip');
const L = {
  ko: { bt: '정보', bw: '아이콘 이름만 반복', gt: '최근 30일 평균이에요', gw: '값의 계산 기준을 설명' },
  en: { bt: 'Info', bw: "repeats the icon's own name", gt: 'Average over the last 30 days', gw: 'explains how the value is calculated' },
};
let lang = 'ko', show = false;
function paint() {
  const t = L[lang];
  bt.textContent = t.bt; bw.textContent = t.bw; gt.textContent = t.gt; gw.textContent = t.gw;
  btip.classList.toggle('show', show); gtip.classList.toggle('show', show);
}
paint();
setInterval(() => { show = !show; if (!show) lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 1600);