📂프로그래밍

자바스크립트로 마우스 호버 시 풋노트를 툴팁으로 출력하는 법

쇼케이스

이것은 예시 문장입니다. ¹

작은 1에 마우스를 올려보면 ‘이것은 첫 번째 각주 내용입니다.‘라는 툴팁이 뜬다.

코드

markdown

이것은 예시 문장입니다. [^1]

[^1]: 이것은 첫 번째 각주 내용입니다.

풋노트를 쓰는 수단은 어찌되든 상관 없고, 심지어는 html이 아니라 마크다운으로 써도 통한다.

javascript

<script>
document.addEventListener("DOMContentLoaded", function () {
  const footnoteRefs = document.querySelectorAll(".footnote-ref");
  const footnotes = document.querySelectorAll(".footnotes li");

  const footnoteMap = {};
  footnotes.forEach(fn => {
    const id = fn.id;
    const content = fn.innerText.replace("↩", "").trim();
    footnoteMap[id] = content;
  });

  const tooltip = document.createElement("div");
  tooltip.className = "footnote-preview";
  document.body.appendChild(tooltip);

  footnoteRefs.forEach(ref => {
    ref.addEventListener("mouseenter", function (e) {
      const href = ref.getAttribute("href").replace("#", "");
      const preview = footnoteMap[href];
      if (preview) {
        tooltip.innerText = preview;
        tooltip.style.display = "block";
        tooltip.style.left = e.pageX + 10 + "px";
        tooltip.style.top = e.pageY + 10 + "px";
      }
    });

    ref.addEventListener("mousemove", function (e) {
      tooltip.style.left = e.pageX + 10 + "px";
      tooltip.style.top = e.pageY + 10 + "px";
    });

    ref.addEventListener("mouseleave", function () {
      tooltip.style.display = "none";
    });
  });
});
</script>

이 구현은 근본적으로 자바스크립트에서 툴팁을 ‘만들어내는 방법’이다. 모든 글에서 일부러 툴팁의 내용을 만들어두지 않더라도 풋노트에 해당하는 내용을 읽어내고 거기서 쓸모없는 내용을 추린 후 웹 요소로써 생성하는 것이다.

• const content = fn.innerText.replace("↩", "").trim();: 풋노트에서 쓸모없는 ‘↩’를 제거하는 과정에 속한다.
• const tooltip = document.createElement("div");: 툴팁을 만들어내는 과정에 속한다.

CSS

<style>
.footnote-preview {
  position: absolute;
}
</style>

다른 모양은 둘째치더라도 position: absolute;는 필수적으로 있어야 한다. 백그라운드 컬러와 z-index를 주어 다른 요소들보다 위에 뜨도록 수정하는 것은 각자의 몫이다.