인용 표시

<p class="ans">겨울철 배터리 효율은 저온에서 이온 이동 속도가 느려지기 때문에 떨어집니다.<sup class="cite" id="c1" tabindex="0">1</sup> 급속 충전은 이 현상을 더 심하게 만들 수 있습니다.<sup class="cite" id="c2" tabindex="0">2</sup></p>
<div class="card" id="card"><strong id="ctitle">배터리 저온 성능 리포트</strong><span id="cdom">battery-research.example</span></div>

.ans{width:min(300px,94%);font-size:12px;line-height:1.75;color:var(--fg)}
.cite{color:var(--accent);font-weight:700;cursor:pointer;padding:0 1px}
.cite[data-hot]{background:color-mix(in srgb, var(--accent) 20%, transparent);border-radius:3px}
.card{position:absolute;width:170px;padding:10px 12px;border-radius:10px;background:var(--fg);color:var(--bg);
  display:grid;gap:2px;font-size:10.5px;box-shadow:0 14px 30px rgba(0,0,0,.28);opacity:0;transform:translateY(4px);
  transition:opacity .18s,transform .18s;pointer-events:none}
.card[data-show]{opacity:1;transform:translateY(0)}
.card strong{font-size:11px}
.card span{opacity:.65}

const c1 = document.getElementById('c1'), c2 = document.getElementById('c2');
const card = document.getElementById('card'), title = document.getElementById('ctitle'), dom = document.getElementById('cdom');
const data = {
  c1: ['배터리 저온 성능 리포트', 'battery-research.example'],
  c2: ['급속 충전 열화 가이드', 'ev-charging-docs.example'],
};
function show(el) {
  const r = el.getBoundingClientRect();
  const [t, d] = data[el.id];
  title.textContent = t; dom.textContent = d;
  card.style.left = Math.min(r.left, innerWidth - 180) + 'px';
  card.style.top = (r.bottom + 8) + 'px';
  card.setAttribute('data-show', '');
  el.setAttribute('data-hot', '');
}
function hide(el) { card.removeAttribute('data-show'); el.removeAttribute('data-hot'); }
let idx = 0;
const els = [c1, c2];
function loop() {
  const el = els[idx % els.length];
  show(el);
  setTimeout(() => { hide(el); idx++; setTimeout(loop, 300); }, 2200);
}
loop();