HTMLでツールチップ表示

以前に参考文献を一覧表示できるようにしたが、脚注のやり方をそのまま使っているので、引用が大量にあると、参考文献からの逆参照がたくさんできてしまい、扱いづらくなっていた
引用表示のところで参考文献を表示できないだろうかと思って、ツールチップで参考文献を表示するようにしてみる
CSSで、位置調整した要素に対してhoverに応じて表示非表示を切り替えればいけるらしい
- idを適切に割り振れるなら:targetを使ってもできるらしい
最終的に、CSSは以下のようになった
- 要素の幅が固定なのは、テキスト幅に合わせる方法が分からなかったため
  - テキストが短いときに不格好になるけど、文献情報が短くなることは少ないはずなので、とりあえずこれで

/* 文中の引用表示 */
.citation {
    position: relative;
    display: inline-block;
}

/* 文中の参考文献表示 */
.inline-bibliography {
    /* 通常で非表示 */
    visibility: hidden;
    opacity: 0;

    /* 大きさと色 */
    display: inline-block;
    width: 400px;
    padding: 6px;
    border: 1px solid var(--content);
    border-radius: 6px;
    color: var(--primary);
    background-color: var(--theme);

    /* テキスト */
    text-align: center;
    font-size: 13px;

    /* 他の要素より手前に来るようにする */
    position: absolute;
    z-index: 1;

    /* 親要素の真上中央に表示する */
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);

    /* 素早くスッと出てくる */
    transition: opacity 0.1s;

    /* ポインタで触れられない */
    pointer-events: none;
}

/* 引用表示に触れると、文献情報が見えるようになる */
.citation:hover .inline-bibliography {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

そして、引用表示を以下のHTMLに置き換えた

<span class="citation">
    <a id="cite-@citekey:N" href="#bib-@citekey">引用</a>
    <span class="inline-bibliography">
        参考文献
    </span>
</span>

これで、以下のような要素にマウスカーソルを乗せると文献情報が表示されるようになります。

[Last 2025Last, F. 2025. Example.]

HTMLでツールチップ表示

参考資料