Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1220"><p class="tbx-1220-paragraph">Readable interfaces are built from <span class="tbx-1220-anchor" tabindex="0" role="note" aria-label="Reference 03: Usability research">small decisions <sup>[03]</sup><span class="tbx-1220-note">REFERENCE 03 <strong>Usability research</strong></span></span> made with care.</p></div>CSS
.tbx-1220{box-sizing:border-box;max-width:100%;overflow:visible}
.tbx-1220{display:grid;place-items:center;width:100%;min-height:200px;padding:25px 19px;background:#f0f2f4;font-family:Georgia,serif}.tbx-1220 *{box-sizing:border-box}.tbx-1220-paragraph{width:min(100%,310px);margin:0;color:#303940;font-size:19px;line-height:1.65}.tbx-1220-anchor{position:relative;display:inline;color:#244b7d;cursor:help;border-bottom:1px dotted #244b7d;outline-offset:2px}.tbx-1220-anchor sup{font-family:Arial,sans-serif;font-size:9px;white-space:nowrap}.tbx-1220-note{position:absolute;z-index:2;bottom:calc(100% + 6px);left:0;width:0;max-width:calc(100vw - 90px);overflow:hidden;white-space:nowrap;border-radius:4px;background:#244b7d;color:white;font:9px/1.5 Arial,sans-serif;letter-spacing:.08em;opacity:0;padding:0;transform:translateY(7px);transition:width .35s,opacity .25s,transform .35s,padding .35s}.tbx-1220-note strong{display:block;font-size:12px;letter-spacing:0}.tbx-1220-anchor:is(:hover,:focus-visible) .tbx-1220-note{width:166px;padding:8px 12px;opacity:1;transform:translateY(0)}.tbx-1220-anchor:focus-visible{outline:2px solid #244b7d}
@media(prefers-reduced-motion:reduce){.tbx-1220 *, .tbx-1220 *::before,.tbx-1220 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Blog, Documentation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバー時だけに限定しないでください。
Browser：最新のChrome・Safari・Firefox・Edgeでご確認ください。
Reduced Motion：prefers-reduced-motion: reduceに対応。