Live Demo
説明アイコンにカーソルを重ねるかTabでフォーカスしてください。スクリーンリーダーでは補足説明を読み上げます。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1048"><span class="tbx-1048__label">公開範囲</span><button type="button" aria-describedby="tbx-1048-description">?</button><span class="tbx-1048__bubble" aria-hidden="true">設定はあとから変更できます。</span><span id="tbx-1048-description" class="tbx-1048__sr">設定はあとから変更できます。</span></div>
CSS
.tbx-1048{position:relative;display:inline-flex;align-items:center;gap:9px;padding:45px 20px;color:#263c4d;font-family:system-ui}
.tbx-1048__label{font-size:13px;font-weight:700}.tbx-1048 button{width:23px;height:23px;padding:0;display:grid;place-items:center;border:1px solid #90aab9;background:#eff5f7;border-radius:50%;color:#2e6476;font-size:12px;font-weight:800;cursor:help;transition:background .2s,transform .2s}
.tbx-1048__bubble{position:absolute;left:50%;bottom:80px;transform:translate(-50%,8px);max-width:260px;min-width:206px;padding:11px 13px;border-radius:7px;background:#23475b;color:#fff;text-align:center;font-size:11px;line-height:1.55;box-shadow:0 10px 22px #0c27392b;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,transform .22s,visibility .22s}
.tbx-1048__bubble:after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:#23475b}
.tbx-1048:has(button:is(:hover,:focus-visible)) .tbx-1048__bubble{opacity:1;visibility:visible;transform:translate(-50%,0)}
.tbx-1048 button:is(:hover,:focus-visible){background:#d9edf0;transform:scale(1.07)}.tbx-1048 button:focus-visible{outline:3px solid #d28a57;outline-offset:3px}
.tbx-1048__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.tbx-1048 button,.tbx-1048__bubble{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
フォームの補足説明・料金注記・入力例
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末でも情報が欠落しない設計を基本とします。クリックで操作するサンプルはタップで確認できます。
Browser：最新のChrome・Firefox・Safari・Edge向けCSS。:has()を利用する素材は最新ブラウザを想定しています。
Reduced Motion：prefers-reduced-motion: reduceに対応。