Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1276"><table><caption>MONTHLY PERFORMANCE</caption><thead><tr><th scope="col">Channel</th><th scope="col">Visits</th><th scope="col">Trend</th></tr></thead><tbody><tr><th scope="row">Organic</th><td><button type="button">12,460<span class="pop" aria-hidden="true"><svg viewBox="0 0 100 32"><polyline points="0,25 18,21 37,23 58,12 77,15 100,4"/></svg><small>+18% this month</small></span></button></td><td>↗</td></tr><tr><th scope="row">Direct</th><td><button type="button">8,240<span class="pop" aria-hidden="true"><svg viewBox="0 0 100 32"><polyline points="0,26 18,18 37,20 58,15 77,10 100,9"/></svg><small>+9% this month</small></span></button></td><td>↗</td></tr></tbody></table></div>CSS
.tbx-1276{width:100%;min-height:218px;box-sizing:border-box;display:grid;place-items:center;background:#edf0f7;padding:20px 15px;font-family:system-ui,sans-serif;color:#283c57}.tbx-1276 *{box-sizing:border-box}
.tbx-1276 table{border-collapse:collapse;width:min(332px,100%);background:white;box-shadow:0 10px 23px #253b5a1c;border:1px solid #d5deea;font-size:11px;table-layout:fixed}
.tbx-1276 caption{text-align:left;background:#263d5b;color:#fff;padding:10px 12px;letter-spacing:.13em;font-size:9px;font-weight:800}.tbx-1276 th,.tbx-1276 td{padding:10px 9px;border-bottom:1px solid #e2e8ef;text-align:left}.tbx-1276 thead th{background:#f5f7fb;color:#8a9aaa;font-size:10px}.tbx-1276 tbody th{font-size:11px;font-weight:600}.tbx-1276 tbody td:last-child{color:#4f956b;font-size:17px}
.tbx-1276 td{position:relative}.tbx-1276 button{color:#2b5e8c;background:none;border:0;padding:5px 0;cursor:pointer;font:700 12px system-ui;white-space:nowrap}
.tbx-1276 .pop{position:absolute;bottom:calc(100% - 2px);left:-12px;width:135px;padding:11px;background:#233f5a;color:white;border-radius:5px;opacity:0;transform:translateY(7px);pointer-events:none;transition:opacity .26s,transform .26s;z-index:2;box-shadow:0 8px 18px #20334945}.tbx-1276 .pop svg{display:block;width:100%;height:36px;fill:none;stroke:#7ad6ae;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.tbx-1276 .pop small{font:500 9px system-ui;color:#d7e8f2}
.tbx-1276 button:is(:hover,:focus-visible) .pop{opacity:1;transform:none}.tbx-1276 button:is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:3px}
.tbx-1276 :focus-visible{outline:2px solid #de965b;outline-offset:2px}
@media(max-width:380px){.tbx-1276 th,.tbx-1276 td{padding:9px 6px}.tbx-1276 .pop{left:-28px}}
@media(prefers-reduced-motion:reduce){.tbx-1276 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Dashboard, Table
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーができないため、フォーカス・タッチ操作を確認してください。
Browser：現行版のChrome・Safari・Firefox・Edgeを推奨。:has()を利用する素材は古いブラウザでは挙動が異なる場合があります。
Reduced Motion：prefers-reduced-motion: reduce 対応。