📂プログラミング

JavaScriptでマウスホバー時に脚注をツールチップとして表示する方法

ショーケース

これは例の文である。¹

小さな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>

この実装は根本的にJavaScriptでツールチップを「生成する方法」である。すべての文書でわざわざツールチップの内容を用意しなくても、脚注に相当する内容を読み取り、そこから不要な内容を取り除いてウェブ要素として生成する。

• const content = fn.innerText.replace("↩", "").trim();: 脚注から不要な ‘↩’ を取り除く過程に属する。
• const tooltip = document.createElement("div");: ツールチップを生成する過程に属する。

CSS

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

見た目の違いはさておき position: absolute; は必須である。背景色や z-index を与えて他の要素より上に表示されるように調整するのは各自の裁量である。