Code Token Annotation
Hovering over code tokens reveals small labels explaining their syntax roles.
Hovering over code tokens reveals small labels explaining their syntax roles.
Live Demo
Hover over the element or use Tab to focus.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
HTML
<div class="tbx-1132" role="group" aria-label="Explanation of CSS syntax"><div class="tbx-1132__head"><b>style.css</b><small>HOVER TOKENS</small></div><code><span tabindex="0" class="tbx-1132__token" data-note="CSS SELECTOR">.card:hover</span> {<br> <span tabindex="0" class="tbx-1132__token tbx-1132__property" data-note="CSS PROPERTY">transform</span>: <span tabindex="0" class="tbx-1132__token tbx-1132__value" data-note="CSS VALUE">scale(1.05)</span>;<br> <span tabindex="0" class="tbx-1132__token tbx-1132__property" data-note="CSS PROPERTY">opacity</span>: <span tabindex="0" class="tbx-1132__token tbx-1132__value" data-note="CSS VALUE">1</span>;<br>}</code><div class="tbx-1132__foot">Hover over each code token</div></div>CSS
.tbx-1132{width:min(286px,100%);min-height:189px;border-radius:9px;overflow:hidden;background:#202c40;color:#c9d7e5;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;box-shadow:0 8px 19px #162b3922}.tbx-1132__head{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#162338;border-bottom:1px solid #405369}.tbx-1132__head b{font-size:10px;font-weight:700;color:#d6e8f5}.tbx-1132__head small{font-size:8px;letter-spacing:.12em;color:#83b2ab}.tbx-1132 code{display:block;padding:17px 12px 14px;font:12px/2.1 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}.tbx-1132__token{position:relative;cursor:help;border-radius:3px;color:#e0be85;outline-offset:2px;transition:background .25s,color .25s}.tbx-1132__property{color:#87c6c3}.tbx-1132__value{color:#eab08f}.tbx-1132__token:after{content:attr(data-note);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,5px);white-space:nowrap;background:#f5e6c5;color:#264155;border-radius:3px;padding:3px 5px;font:bold 8px/1.2 system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:3}.tbx-1132__token:is(:hover,:focus-visible){background:#445974;color:#fff}.tbx-1132__token:is(:hover,:focus-visible):after{opacity:1;transform:translate(-50%,0)}.tbx-1132__foot{font:9px/1.2 system-ui,sans-serif;color:#91a6b9;padding:0 12px 12px}.tbx-1132__token:focus-visible{outline:2px solid #f5e6c5}@media(prefers-reduced-motion:reduce){.tbx-1132 *,.tbx-1132__token:after{transition:none!important}}
How to Use
Insert the HTML and add the CSS to your stylesheet. Adjust colors and sizes and avoid class conflicts.
Use Case
Useful for documentation sections and learning sections.
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Ensure the interactive content remains accessible without hover on touch devices.
Browser: Uses modern CSS. Check behavior in the browsers you support.
Reduced Motion: Check that prefers-reduced-motion is respected.