Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1231"><p class="sentence">A useful interface needs <span class="anchor"><a href="#tb1231">affordance <span aria-hidden="true">↗</span></a><span class="info" role="note"><b>Affordance</b><span>操作可能だと伝える、見た目の手がかり。</span></span></span> to guide users.</p></div>CSS
.tbx-1231{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:212px;width:100%;max-width:100%;padding:19px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#18314a;}
.tbx-1231 * ,.tbx-1231 *::before,.tbx-1231 *::after{box-sizing:border-box}
.tbx-1231{background:#faf7f0}.tbx-1231 .sentence{font-family:Georgia,serif;font-size:20px;line-height:1.75;max-width:310px;margin:0}.tbx-1231 .anchor{position:relative;display:inline-block}.tbx-1231 .anchor>a{font-weight:750;text-decoration:underline;text-decoration-color:#d59a4b;text-decoration-thickness:3px;text-underline-offset:5px;color:#303e4e}.tbx-1231 .anchor>a>span{font:13px system-ui}.tbx-1231 .info{font:12px/1.5 system-ui,sans-serif;display:flex;flex-direction:column;gap:6px;position:absolute;z-index:3;left:0;bottom:calc(100% + 10px);width:210px;border-left:4px solid #c78c43;background:#fff;color:#273b48;padding:12px;box-shadow:0 8px 20px #29404a22;opacity:0;transform:translateY(8px) scale(.96);pointer-events:none;transition:opacity .25s,transform .3s}.tbx-1231 .info b{font-size:13px}.tbx-1231 .anchor:is(:hover,:focus-within) .info{opacity:1;transform:translateY(0) scale(1)}.tbx-1231 a:focus-visible{outline:2px solid #b27430;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.tbx-1231 *, .tbx-1231 *::before,.tbx-1231 *::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Article, Education
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーできないことがあります。必要な情報・操作はホバー以外でも利用できるようにしてください。
Browser：最新版Chrome・Safari・Firefox・Edgeをご使用ください。
Reduced Motion：prefers-reduced-motion: reduce対応。