Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1255"><div class="paper"><span class="kicker">EDITORIAL / 05</span><p>Design systems become more valuable when they are <button type="button" class="anchor" aria-label="Reusableの補足説明">reusable<span class="num">01</span><span class="note">同じ部品を複数ページで使用する設計。</span></button> across pages.</p></div></div>CSS
.tbx-1255{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:218px;overflow:visible;padding:24px 18px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#243e43}
.tbx-1255 *,.tbx-1255 *::before,.tbx-1255 *::after{box-sizing:border-box}
.tbx-1255{background:#f1eee7;color:#252f34}
.tbx-1255 .paper{width:min(305px,100%);position:relative;border-left:2px solid #c4b6a2;padding:15px 12px 14px 19px;background:#fffdfa}
.tbx-1255 .kicker{font-size:9px;letter-spacing:.18em;color:#aa8460}
.tbx-1255 .paper p{font-size:18px;line-height:1.6;letter-spacing:-.02em;margin:12px 0 2px}
.tbx-1255 .anchor{font:inherit;font-weight:750;display:inline;padding:0 1px;background:transparent;color:#264a56;border:0;border-bottom:2px dotted #bd6b54;cursor:help;position:relative}
.tbx-1255 .num{position:absolute;top:-8px;right:-13px;font-size:8px;color:#bd6b54}
.tbx-1255 .note{position:absolute;left:auto;right:-8px;bottom:calc(100% + 12px);width:185px;padding:10px 13px;text-align:left;font:11px/1.5 system-ui,sans-serif;letter-spacing:0;background:#203e49;color:#fff;transform:translateY(8px);opacity:0;visibility:hidden;transition:opacity .24s,transform .24s,visibility .24s;box-shadow:0 7px 15px #14272d25;pointer-events:none;z-index:2}
.tbx-1255 .anchor:is(:hover,:focus-visible) .note{opacity:1;visibility:visible;transform:translateY(0)}
@media (prefers-reduced-motion: reduce) {.tbx-1255 *, .tbx-1255 *::before, .tbx-1255 *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Article, Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーが利用できない場合があります。リンク・入力操作をホバー専用にしないでください。
Browser：Chrome・Firefox・Safari・Edgeの現行版を推奨。:has()利用素材は現行版で確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。