提案・要望
- Wikipediaの脚注ツールチップのように，脚注ホバー時にツールチップでプレビュー，クリックで脚注にジャンプするようにしていただきたいです
背景
-
現在のZennビューワでは脚注をクリックするとページ下部に遷移され本文に戻ってくるのが大変で，脚注の確認が面倒です．
-
自身が執筆する時も「脚注を書いてもどうせ読んでもらえない」と思って，本来脚注にあるべき内容を本文にベタ書きしてしまうことがあり，記事の質を上げるうえで脚注表示の方法がボトルネックになっています．
-
しかし，脚注ホバー追加がプレビュー時のパフォーマンス低下やビルド時間増大・デザインの一貫性欠如に繋がる場合はこの変更には及ばないと考えます．
関連
サンプルコード
既存のツールチップ風メッセージを発見しましたので，そちらを参考にサンプルコードをプレーンなHTMLで実装しました．ご査収ください．
A案: Borderなし
ダークモード
（元記事: MacBook Pro (Mid 2014)でFedora Linuxをデュアルブートしよう）
コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Zenn脚注ツールチップ実装例</title>
<style>
/*既存: ダークモード*/
:root {
--c-bg-base: #0d223a;
--c-bg-neutral: #09376d;
--c-text-body: #ecf5ff;
--c-text-link: #3ea8ff;
--c-text-low-priority: #a4bcd5;
--rounded-xs: 4px;
}
body {
background-color: var(--c-bg-base);
color: var(--c-text-body);
}
/*既存*/
.footnote-ref {
position: relative;
display: inline-block;
cursor: pointer;
font-style: normal;
}
/*既存*/
.footnote-ref a {
color: var(--c-text-link);
text-decoration: none;
font-weight: 500;
padding: 0 2px;
}
.footnote-ref a:hover {
text-decoration: underline;
}
/*追加: 脚注本体*/
.footnote-tooltip {
position: absolute;
top: 140%;
left: 50%;
transform: translateX(-50%) translateY(-4px);
width: 280px;
white-space: normal;
z-index: 100;
padding: 0.2rem 0.8rem;
font-size: 0.8rem;
line-height: 1.7;
color: var(--c-text-low-priority);
background-color: var(--c-bg-neutral);
border-radius: var(--rounded-xs);
/*デフォルトでは非表示*/
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
text-align: left;
font-weight: normal;
}
/*追加: 上の突起部分*/
.footnote-tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: transparent transparent var(--c-bg-neutral)
transparent;
}
/*追加: ホバー時に表示*/
.footnote-ref:hover .footnote-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/*追加: 脚注のタイトル*/
.footnote-title {
font-weight: bold;
}
</style>
</head>
<body>
<p>
当時のLTSである20系を使えなかった記憶があります<sup
class="footnote-ref"
>
<a href="#fn-4939-1" id="fnref-4939-1">[1]</a>
<span class="footnote-tooltip">
<span class="footnote-title">脚注</span><br />
過去に関わっていたプロジェクトではNode
v16を使っているので，ひょっとしたらv18すら動かなかったのかもしれない
(<a href="">GitHub</a>)
</span></sup
>。
</p>
</body>
</html>
ライトモード
コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Zenn脚注ツールチップ実装例</title>
<style>
/*既存: ライトモード*/
:root {
--c-bg-base: #fff;
--c-bg-neutral: #edf2f7;
--c-text-body: rgb(0 0 0/82%);
--c-text-link: #3ea8ff;
--c-text-low-priority: #65717b;
--rounded-xs: 4px;
}
body {
background-color: var(--c-bg-base);
color: var(--c-text-body);
}
/*既存*/
.footnote-ref {
position: relative;
display: inline-block;
cursor: pointer;
font-style: normal;
}
/*既存*/
.footnote-ref a {
color: var(--c-text-link);
text-decoration: none;
font-weight: 500;
padding: 0 2px;
}
.footnote-ref a:hover {
text-decoration: underline;
}
/*追加: 脚注本体*/
.footnote-tooltip {
position: absolute;
top: 140%;
left: 50%;
transform: translateX(-50%) translateY(-4px);
width: 280px;
white-space: normal;
z-index: 100;
padding: 0.2rem 0.8rem;
font-size: 0.8rem;
line-height: 1.7;
color: var(--c-text-low-priority);
background-color: var(--c-bg-neutral);
border-radius: var(--rounded-xs);
/*デフォルトでは非表示*/
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
text-align: left;
font-weight: normal;
}
/*追加: 上の突起部分*/
.footnote-tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: transparent transparent var(--c-bg-neutral)
transparent;
}
/*追加: ホバー時に表示*/
.footnote-ref:hover .footnote-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/*追加: 脚注のタイトル*/
.footnote-title {
font-weight: bold;
}
</style>
</head>
<body>
<p>
当時のLTSである20系を使えなかった記憶があります<sup
class="footnote-ref"
>
<a href="#fn-4939-1" id="fnref-4939-1">[1]</a>
<span class="footnote-tooltip">
<span class="footnote-title">脚注</span><br />
過去に関わっていたプロジェクトではNode
v16を使っているので，ひょっとしたらv18すら動かなかったのかもしれない
(<a href="">GitHub</a>)
</span></sup
>。
</p>
</body>
</html>
B案: Borderあり
区切り線を付加し，Zennみを足したバージョンもご用意しました．
ダークモード
コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Zenn脚注ツールチップ実装例</title>
<style>
/*既存: ダークモード*/
:root {
--c-bg-base: #0d223a;
--c-bg-neutral: #09376d;
--c-neutral-border: #2e445c;
--c-text-body: #ecf5ff;
--c-text-link: #3ea8ff;
--c-text-low-priority: #a4bcd5;
--rounded-xs: 4px;
}
body {
background-color: var(--c-bg-base);
color: var(--c-text-body);
}
/*既存*/
.footnote-ref {
position: relative;
display: inline-block;
cursor: pointer;
font-style: normal;
}
/*既存*/
.footnote-ref a {
color: var(--c-text-link);
text-decoration: none;
font-weight: 500;
padding: 0 2px;
}
.footnote-ref a:hover {
text-decoration: underline;
}
/*追加: 脚注本体*/
.footnote-tooltip {
position: absolute;
top: 140%;
left: 50%;
transform: translateX(-50%) translateY(-4px);
width: 280px;
white-space: normal;
z-index: 100;
padding: 0.2rem 0.8rem;
font-size: 0.8rem;
line-height: 1.7;
color: var(--c-text-low-priority);
background-color: var(--c-bg-neutral);
border-radius: var(--rounded-xs);
/*デフォルトでは非表示*/
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
text-align: left;
font-weight: normal;
}
/*追加: 上の突起部分*/
.footnote-tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: transparent transparent var(--c-bg-neutral)
transparent;
}
/*追加: ホバー時に表示*/
.footnote-ref:hover .footnote-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/*追加: 脚注のタイトル*/
.footnote-title {
font-weight: bold;
display: block;
border-bottom: 1px solid var(--c-neutral-border);
padding-bottom: 4px;
margin-bottom: 4px;
}
</style>
</head>
<body>
<p>
当時のLTSである20系を使えなかった記憶があります<sup
class="footnote-ref"
>
<a href="#fn-4939-1" id="fnref-4939-1">[1]</a>
<span class="footnote-tooltip">
<span class="footnote-title">脚注</span>
過去に関わっていたプロジェクトではNode
v16を使っているので，ひょっとしたらv18すら動かなかったのかもしれない
(<a href="">GitHub</a>)
</span></sup
>。
</p>
</body>
</html>
ライトモード
コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Zenn脚注ツールチップ実装例</title>
<style>
/*既存: ライトモード*/
:root {
--c-bg-base: #fff;
--c-bg-neutral: #edf2f7;
--c-neutral-border: #d6e3ed;
--c-text-body: rgb(0 0 0/82%);
--c-text-link: #3ea8ff;
--c-text-low-priority: #65717b;
--rounded-xs: 4px;
}
body {
background-color: var(--c-bg-base);
color: var(--c-text-body);
}
/*既存*/
.footnote-ref {
position: relative;
display: inline-block;
cursor: pointer;
font-style: normal;
}
/*既存*/
.footnote-ref a {
color: var(--c-text-link);
text-decoration: none;
font-weight: 500;
padding: 0 2px;
}
.footnote-ref a:hover {
text-decoration: underline;
}
/*追加: 脚注本体*/
.footnote-tooltip {
position: absolute;
top: 140%;
left: 50%;
transform: translateX(-50%) translateY(-4px);
width: 280px;
white-space: normal;
z-index: 100;
padding: 0.2rem 0.8rem;
font-size: 0.8rem;
line-height: 1.7;
color: var(--c-text-low-priority);
background-color: var(--c-bg-neutral);
border-radius: var(--rounded-xs);
/*デフォルトでは非表示*/
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
text-align: left;
font-weight: normal;
}
/*追加: 上の突起部分*/
.footnote-tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: transparent transparent var(--c-bg-neutral)
transparent;
}
/*追加: ホバー時に表示*/
.footnote-ref:hover .footnote-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/*追加: 脚注のタイトル*/
.footnote-title {
font-weight: bold;
display: block;
border-bottom: 1px solid var(--c-neutral-border);
padding-bottom: 4px;
margin-bottom: 4px;
}
</style>
</head>
<body>
<p>
当時のLTSである20系を使えなかった記憶があります<sup
class="footnote-ref"
>
<a href="#fn-4939-1" id="fnref-4939-1">[1]</a>
<span class="footnote-tooltip">
<span class="footnote-title">脚注</span>
過去に関わっていたプロジェクトではNode
v16を使っているので，ひょっとしたらv18すら動かなかったのかもしれない
(<a href="">GitHub</a>)
</span></sup
>。
</p>
</body>
</html>
参考
コード
<div aria-hidden="false" class="PopUp_popup__lIgfz AnnouncementPopUp_container__Pb5q2">
<!-- 謎のdivタグ-->
<div>
<a href="https://classmethod.jp/m/cm-forum2026/?utm_source=zenn&utm_medium=cm&utm_campaign=260520-cm-forum2026" rel="nofollow noopener noreferrer" target="_blank">
5/20開催! Classmethod Forum 2026 - 事業会社のリアルとAIで描く未来
</a>
</div>
</div>.PopUp_popup__lIgfz {
transition: .3s ease;
animation: PopUp_popup__lIgfz .3s ease;
}
.AnnouncementPopUp_container__Pb5q2 {
position: relative;
display: inline-block;
padding: .2rem .8rem;
font-size: .8rem;
line-height: 1.7;
color: var(--c-text-low-priority);
background-color: var(--c-bg-neutral);
border: 2px solid var(--c-bg-neutral);
border-radius: var(--rounded-xs);
}
😻 コメント, ラブレター
@cm-igarashi-ryosuke @cm-wada-yusuke @catnose99 ほかみなみなさま
いつも楽しくZenn記事を執筆しています．
AI生成に対するポリシーを明確に示したり，様々なイベントを通じてZennコミュニティを維持し，また盛り上げてくださっている運営の皆様に感謝いたします．
少しZennのUI上に記事と関連しないコンテンツが増えてきて残念なところもありますが，Git経由の執筆管理などZennのアイデンティティはまだ衰えていないと感じています！
今回の機能追加依頼に限らず，今後も記事執筆や時にはPRでZennを応援していきたいと思いますので，どうぞよろしくお願いいたします．
また，本Issueについてもお手隙の際にご確認いただけましたら幸いです．
木越斎
提案・要望
背景
現在のZennビューワでは脚注をクリックするとページ下部に遷移され本文に戻ってくるのが大変で，脚注の確認が面倒です．
自身が執筆する時も「脚注を書いてもどうせ読んでもらえない」と思って，本来脚注にあるべき内容を本文にベタ書きしてしまうことがあり，記事の質を上げるうえで脚注表示の方法がボトルネックになっています．
しかし，脚注ホバー追加がプレビュー時のパフォーマンス低下やビルド時間増大・デザインの一貫性欠如に繋がる場合はこの変更には及ばないと考えます．
関連
サンプルコード
既存のツールチップ風メッセージを発見しましたので，そちらを参考にサンプルコードをプレーンなHTMLで実装しました．ご査収ください．
A案: Borderなし
ダークモード
（元記事: MacBook Pro (Mid 2014)でFedora Linuxをデュアルブートしよう）
コード
ライトモード
コード
B案: Borderあり
区切り線を付加し，Zennみを足したバージョンもご用意しました．
ダークモード
コード
ライトモード
コード
参考
コード
😻 コメント, ラブレター
@cm-igarashi-ryosuke @cm-wada-yusuke @catnose99 ほかみなみなさま
いつも楽しくZenn記事を執筆しています．
AI生成に対するポリシーを明確に示したり，様々なイベントを通じてZennコミュニティを維持し，また盛り上げてくださっている運営の皆様に感謝いたします．
少しZennのUI上に記事と関連しないコンテンツが増えてきて残念なところもありますが，Git経由の執筆管理などZennのアイデンティティはまだ衰えていないと感じています！
今回の機能追加依頼に限らず，今後も記事執筆や時にはPRでZennを応援していきたいと思いますので，どうぞよろしくお願いいたします．
また，本Issueについてもお手隙の際にご確認いただけましたら幸いです．
木越斎