オンマウスで吹き出しを出すもっともシンプルな方法（2020/12/28）

ブログ記事が時々長ったらしくなるので、適宜バルーンで補足文を出そうと思う。装飾は最小限でよい。
おそらくこれがもっともシンプルな CSS コードだろうというのを考えてみた。

なんでもできるよ

• テキストまたは画像上へのマウスホーバーでテキストも画像も自由自在に出せる。
• 同一ページ内で何回でも使える。

表示例
See morethe contents of "more"　　 Shirase

HTML
<label class="see-more" href="#">See more<span>the contents of "more"</span></label>

CSS
.see-more {
　position: relative;
　color: blue;
}
.see-more span {
　display: none;
}
.see-more:hover span {
　display: block;
　position: absolute;
　padding: 1em
　top: -3em;
　left: 0;
　background: #000;
　color: #fff;
　white-space: nowrap;
}

• 目的から逸脱するが borde-radius や :before などで変形させてもよい。
• 状況に応じて left, top や width を変更する。
• 他のオブジェクトの下に表示されるときは z-index を指定する。
• html コードで label の代わりに <a class="see-more" href="#"><span>XXX</span></a> のようにしてもよい。
ただし a を使うとクリック（スマホではタップ）したとき画面が移動してしまうので細工が必要。
• 表示例 Shirase の画像の出し方は、このページのソースコードを参照。

「記事リスト」や「プロフィール」などの吹き出しは content="XXX" を使った別のコードで出している。