用語にホバーまたはフォーカスすると上に説明が浮かぶツールチップ。opacityとvisibilityの併用でJSなしのフェード表示を実現します。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
ツールチップは absolute + bottom: calc(100% + 8px) でアンカーの真上に配置し、left: 50% と translateX(-50%) で中央揃えにします。非表示は opacity: 0 だけでなく visibility: hidden も併用するのがポイントで、透明なツールチップが上に被さってホバー判定を奪う事故を防ぎつつ、opacityのフェードも効かせられます。tabindex="0" と :focus-visible でキーボードでも表示できます。
長文になる場合はwhite-space: nowrapを外してwidthを指定してください。今後はAnchor Positioningやpopover属性での実装も選択肢になります（対応状況に注意）。
JSなしのCSSツールチップを作ってください。ホバーと:focus-visibleの両方で表示し、opacityとvisibilityを併用したフェード、::afterによる吹き出しの三角も付けてください。