Floating layers and status feedback
Document Review Keyboard Tooltip

Keyboard tooltip completed in a document review scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.
Floating layers and status feedbackKeyboard TooltipHTMLCSSJavaScript
With JavaScript enabled, you can edit, run, and save this example. The fixed source is as follows:
<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document Review Keyboard Tooltip</title>
  <style>
    :root { --ink:#3a2419; --paper:#fbf3df; --accent:#c66a2d; --secondary:#b5c88d; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
    * { box-sizing:border-box; }
    html { min-width:320px; background:var(--paper); }
    body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:Didot,"Songti SC",serif; background:linear-gradient(30deg,transparent 48%,color-mix(in srgb,var(--accent) 9%,transparent) 49% 51%,transparent 52%),var(--paper);background-size:52px 90px; }
    button,input,select,textarea { color:inherit; font:inherit; }
    button,[role="button"],input,select,textarea { accent-color:var(--accent); }
    button { cursor:pointer; }
    button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
    [hidden] { display:none !important; }
    @media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
    .page{width:min(1040px,calc(100% - 36px));margin:auto;padding:64px 0}.mast{display:grid;justify-items:center;text-align:center;border-block:3px double var(--accent);padding:26px;gap:20px;margin-bottom:32px}.mast h1{font-family:Didot,"Songti SC",serif;font-weight:700;font-size:clamp(38px,8vw,86px);letter-spacing:.035em;margin:0;line-height:1}.eyebrow{display:block;color:var(--accent);font:800 11px/1 ui-monospace,monospace;letter-spacing:.3em}.intro{max-width:600px;margin-inline:auto;line-height:1.8}.scenario{padding:8px 26px;border-inline:1px solid var(--accent);letter-spacing:.16em}.demo{border:4px double var(--accent);border-radius:0;clip-path:polygon(24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px),0 24px);position:relative;min-height:440px;overflow:hidden;padding:clamp(28px,5vw,60px);background:var(--paper)}@media(max-width:700px){.page{width:calc(100% - 20px);padding:24px 0}.mast{padding:18px}.demo{padding:18px}}
    .panel{padding:20px;border:1px dashed var(--secondary);border-radius:8px;background:color-mix(in srgb,var(--paper) 92%,#000)}.stack{display:grid;gap:10px}.row{display:flex;flex-wrap:wrap;gap:7px}.action{min-height:40px;padding:8px 12px;border:1px solid var(--secondary);border-radius:5px;color:var(--ink);background:transparent;font:700 12px/1 ui-monospace,monospace}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{min-height:22px;color:var(--secondary);font:700 12px/1.5 ui-monospace,monospace}.status::before{content:"status: "}.metric{font:800 clamp(28px,6vw,56px)/1 ui-monospace,monospace}.muted{opacity:.64;font-family:ui-monospace,monospace}.meter{height:8px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 10px)}.meter>i{display:block;height:100%;background:var(--secondary)}.chip{padding:4px 7px;border:1px solid var(--secondary);font:700 10px/1 ui-monospace,monospace}
    .composition-gallery{margin:0;padding:clamp(8px,2vw,18px);border:1px solid var(--ink);background:color-mix(in srgb,var(--paper) 78%,transparent)}.gallery-caption{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:15px 4px 2px;font-size:12px}.gallery-caption::before,.gallery-caption::after{content:"";height:1px;background:var(--line)}.gallery-caption strong{font:800 11px/1.2 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}.composition-gallery .demo{box-shadow:none}.composition-gallery .demo::before{content:"";position:absolute;inset:10px;border:1px dashed color-mix(in srgb,var(--accent) 36%,transparent);pointer-events:none}
    .smart-tooltip-demo{display:grid;gap:28px;max-width:850px;margin:auto}.smart-tooltip-demo header{text-align:center}.smart-tooltip-demo h2{margin:.2em 0;font-size:clamp(34px,7vw,72px)}.tooltip-toolbar{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:20px;border:1px solid var(--line);border-radius:24px;background:var(--paper)}.tooltip-toolbar>button{display:grid;gap:10px;justify-items:center;min-height:100px;padding:14px;border:1px solid transparent;border-radius:16px;background:color-mix(in srgb,var(--secondary) 12%,transparent);font-weight:800}.tooltip-toolbar>button:hover,.tooltip-toolbar>button:focus-visible{border-color:var(--accent)}.tooltip-toolbar>button span{font-size:30px}.smart-tooltip{position:absolute;z-index:3;max-width:230px;padding:10px 13px;border-radius:9px;color:var(--paper);background:var(--ink);box-shadow:0 10px 25px #0004;font-size:13px;font-weight:700;pointer-events:none;transform:translate(-50%,-100%)}.smart-tooltip::after{content:"";position:absolute;top:100%;left:50%;border:7px solid transparent;border-top-color:var(--ink);transform:translateX(-50%)}.smart-tooltip-demo aside{display:flex;gap:18px;align-items:center;padding:18px;border-left:5px solid var(--accent)}.smart-tooltip-demo aside p{margin:0}@media(max-width:560px){.tooltip-toolbar{grid-template-columns:1fr 1fr}.smart-tooltip-demo aside{align-items:flex-start;flex-direction:column}}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}
  </style>
</head>
<body data-aesthetic="art-deco" data-composition="gallery-frame">
  <main class="page">
    <header class="mast"><div><span class="eyebrow">art-deco / keyboard tooltip / BEGINNER</span><h1>Document Review Keyboard Tooltip</h1><p class="intro">Keyboard tooltip completed in a document review scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.</p></div><span class="scenario">Document Review</span></header>
    <figure class="composition-gallery"><section class="demo" aria-label="Document Review Keyboard Tooltip Interaction Area"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Document Review DISPATCH</span><h2>Review Queue Control Center</h2><form id="workflowDispatchForm"><label>Task Type<select id="workflowDispatchKind"><option>Text Editing</option><option>Structural Suggestions</option><option>Publish Confirmation</option></select></label><label>Pending reviews<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="30"><span>item</span></label><fieldset><legend>Processing priority</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Regular</label><label><input type="radio" name="workflowPriority" value="urgent">Urgent</label></fieldset><button class="action primary" type="submit">Submit for Review</button></form><label>Current task<select id="workflowDispatchActive" aria-label="Switch current task"><option value="1">Text Editing</option><option value="2">Structural Suggestions</option></select></label><output id="workflowDispatchSummary">Waiting for Dispatch</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:overlays-feedback-smart-tooltip --><section class="smart-tooltip-demo"><header><span class="eyebrow">SMART TOOLTIP</span><h2>Document Review Quick Tools</h2><p>Hover or focus the button to see the explanation. Press Esc to collapse it immediately.</p></header><div id="tooltipToolbar" class="tooltip-toolbar" role="toolbar" aria-label="Quick Tools"><button type="button" aria-label="Save document review records" aria-describedby="smartTooltip" data-core-bridge="overlays-feedback-smart-tooltip"><span aria-hidden="true">☆</span>Collection</button><button type="button" aria-label="Copy Document Review Collaboration" aria-describedby="smartTooltip"><span aria-hidden="true">□</span>Copy</button><button type="button" aria-label="Archived Document Review Progress" aria-describedby="smartTooltip"><span aria-hidden="true">⌄</span>Archive</button><button type="button" aria-label="Share document review reminder" aria-describedby="smartTooltip"><span aria-hidden="true">↗</span>Share</button><div id="smartTooltip" class="smart-tooltip" role="tooltip" hidden></div></div><aside><strong>Keyboard hints</strong><p>Use Tab to move focus; each button shows its corresponding tip in the same overlay.</p></aside></section><!-- 11DZ_CORE_END --></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section><figcaption class="gallery-caption"><strong>Document Review / GALLERY 03</strong></figcaption></figure>
  </main>
  <script>
    'use strict';
    const statusOutput = document.querySelector('#status');
    const announce = message => { statusOutput.textContent = message; };
    /* 11DZ_CORE_SCRIPT_START:overlays-feedback-smart-tooltip */
const tooltipToolbar=document.querySelector('#tooltipToolbar');const smartTooltip=document.querySelector('#smartTooltip');const tooltipButtons=[...tooltipToolbar.querySelectorAll('button[aria-describedby="smartTooltip"]')];function showSmartTooltip(button){smartTooltip.textContent=button.getAttribute('aria-label');smartTooltip.hidden=false;smartTooltip.style.left=(button.offsetLeft+button.offsetWidth/2)+'px';smartTooltip.style.top=(button.offsetTop-7)+'px';}function hideSmartTooltip(){smartTooltip.hidden=true;}tooltipButtons.forEach(button=>{button.addEventListener('mouseenter',()=>showSmartTooltip(button));button.addEventListener('mouseleave',hideSmartTooltip);button.addEventListener('focus',()=>showSmartTooltip(button));button.addEventListener('blur',hideSmartTooltip);button.addEventListener('click',()=>announce(button.textContent.trim()+'Action Triggered'));});tooltipToolbar.addEventListener('keydown',event=>{if(event.key==='Escape'){hideSmartTooltip();event.target.focus();}});
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"overlays-feedback-smart-tooltip","selector":"[data-core-bridge=\"overlays-feedback-smart-tooltip\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Core Version '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Text Editing","amount":12,"priority":"normal","touches":0}],["2",{"label":"Structural Suggestions","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' item · '+bridge.summary;announce('Current task in the review queue:'+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgent':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' item · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
  </script>
</body>
</html>