Pure CSSMIT licensed

Keyboard Shortcut Card

A list of shortcuts where each row pops out a full reference card — large action title, big keycaps, plain-English description, three "when to use" bullets, and a related-shortcuts pill row. A richer companion to the compact keycap-pill demo earlier in this collection.

Published May 14, 2026

Live Demo

Try it

The code

<div class="tp-10">
  <div class="tp-10__inner">
    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Save file</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">S</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Save File</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">S</span></div>
        </div>
        <div class="tp-10__desc">Saves the current file to disk immediately. If the file has never been saved, opens a Save As dialog to choose a name and location.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">After every meaningful change to preserve work</div>
          <div class="tp-10__when-item">Before switching branches or running tests</div>
          <div class="tp-10__when-item">Before closing the editor or tab</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ ⇧ S — Save As</div>
          <div class="tp-10__rel-pill">⌘ ⌥ S — Save All</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Undo</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">Z</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Undo</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">Z</span></div>
        </div>
        <div class="tp-10__desc">Reverses the last editing action, stepping backwards through the undo history one action at a time. History is preserved across saves.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">After accidentally deleting or overwriting text</div>
          <div class="tp-10__when-item">To compare before/after a refactor</div>
          <div class="tp-10__when-item">To recover from an unwanted auto-format</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ ⇧ Z — Redo</div>
          <div class="tp-10__rel-pill">⌘ K U — Clear history</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Command palette</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">⇧</span><span class="tp-10__plus">+</span><span class="tp-10__key">P</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Command Palette</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">⇧</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">P</span></div>
        </div>
        <div class="tp-10__desc">Opens a searchable list of every editor command, extension action, and setting. The fastest way to trigger any feature without memorising its location.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">To find any command without digging through menus</div>
          <div class="tp-10__when-item">To run a formatter, linter, or task</div>
          <div class="tp-10__when-item">To change settings quickly by name</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ P — Quick open file</div>
          <div class="tp-10__rel-pill">⌘ ⇧ O — Go to symbol</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Find in file</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">F</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Find in File</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">F</span></div>
        </div>
        <div class="tp-10__desc">Opens an inline search bar. Supports plain text, regular expressions, and case-sensitive matching. Highlights all occurrences inside the active file.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">To locate a variable, function, or string in the file</div>
          <div class="tp-10__when-item">To count occurrences of a term before refactoring</div>
          <div class="tp-10__when-item">With regex to find patterns (e.g. unused imports)</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ H — Find &amp; Replace</div>
          <div class="tp-10__rel-pill">⌘ ⇧ F — Find in workspace</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Toggle comment</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">/</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Toggle Comment</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">/</span></div>
        </div>
        <div class="tp-10__desc">Toggles line comments on the current line or all selected lines. Uses the correct comment syntax for the file's language automatically.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">To temporarily disable a block of code for debugging</div>
          <div class="tp-10__when-item">To add an explanatory comment above a function</div>
          <div class="tp-10__when-item">To comment multiple lines at once (select first)</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ ⇧ / — Block comment</div>
          <div class="tp-10__rel-pill">⌘ K C — Add comment</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="tp-10">
  <div class="tp-10__inner">
    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Save file</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">S</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Save File</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">S</span></div>
        </div>
        <div class="tp-10__desc">Saves the current file to disk immediately. If the file has never been saved, opens a Save As dialog to choose a name and location.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">After every meaningful change to preserve work</div>
          <div class="tp-10__when-item">Before switching branches or running tests</div>
          <div class="tp-10__when-item">Before closing the editor or tab</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ ⇧ S — Save As</div>
          <div class="tp-10__rel-pill">⌘ ⌥ S — Save All</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Undo</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">Z</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Undo</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">Z</span></div>
        </div>
        <div class="tp-10__desc">Reverses the last editing action, stepping backwards through the undo history one action at a time. History is preserved across saves.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">After accidentally deleting or overwriting text</div>
          <div class="tp-10__when-item">To compare before/after a refactor</div>
          <div class="tp-10__when-item">To recover from an unwanted auto-format</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ ⇧ Z — Redo</div>
          <div class="tp-10__rel-pill">⌘ K U — Clear history</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Command palette</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">⇧</span><span class="tp-10__plus">+</span><span class="tp-10__key">P</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Command Palette</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">⇧</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">P</span></div>
        </div>
        <div class="tp-10__desc">Opens a searchable list of every editor command, extension action, and setting. The fastest way to trigger any feature without memorising its location.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">To find any command without digging through menus</div>
          <div class="tp-10__when-item">To run a formatter, linter, or task</div>
          <div class="tp-10__when-item">To change settings quickly by name</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ P — Quick open file</div>
          <div class="tp-10__rel-pill">⌘ ⇧ O — Go to symbol</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Find in file</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">F</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Find in File</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">F</span></div>
        </div>
        <div class="tp-10__desc">Opens an inline search bar. Supports plain text, regular expressions, and case-sensitive matching. Highlights all occurrences inside the active file.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">To locate a variable, function, or string in the file</div>
          <div class="tp-10__when-item">To count occurrences of a term before refactoring</div>
          <div class="tp-10__when-item">With regex to find patterns (e.g. unused imports)</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ H — Find &amp; Replace</div>
          <div class="tp-10__rel-pill">⌘ ⇧ F — Find in workspace</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Toggle comment</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">/</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Toggle Comment</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">/</span></div>
        </div>
        <div class="tp-10__desc">Toggles line comments on the current line or all selected lines. Uses the correct comment syntax for the file's language automatically.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">To temporarily disable a block of code for debugging</div>
          <div class="tp-10__when-item">To add an explanatory comment above a function</div>
          <div class="tp-10__when-item">To comment multiple lines at once (select first)</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ ⇧ / — Block comment</div>
          <div class="tp-10__rel-pill">⌘ K C — Add comment</div>
        </div>
      </div>
    </div>
  </div>
</div>

.tp-10 {
  width: 100%;
  min-height: 100vh;
  background: #111116;
  /* Left room — kchord tips pop to the LEFT of each shortcut row,
       ~260px wide. */
  padding: 36px 28px 36px 320px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.tp-10__inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tp-10__t {
  position: relative;
}

.tp-10__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: help;
  transition: background .12s;
}

.tp-10__t:hover .tp-10__row {
  background: rgba(255, 255, 255, 0.04);
}

.tp-10__label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

.tp-10__keys {
  display: flex;
  gap: 4px;
  align-items: center;
}

.tp-10__key {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  line-height: 1;
  letter-spacing: 0.02em;
}

.tp-10__plus {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
}

.tp-10__tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  width: 260px;
  background: #1c1c24;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  text-align: left;
}

.tp-10__t:hover .tp-10__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}

.tp-10__top {
  padding: 14px 14px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tp-10__action {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 7px;
}

.tp-10__keys-big {
  display: flex;
  gap: 5px;
  align-items: center;
}

.tp-10__key-big {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}

.tp-10__plus-big {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}

.tp-10__desc {
  padding: 11px 14px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.55;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'Inter', system-ui, sans-serif;
}

.tp-10__when {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tp-10__when-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tp-10__when-item {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 4px;
  padding-left: 10px;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.4;
}

.tp-10__when-item::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  top: -1px;
}

.tp-10__related {
  padding: 10px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tp-10__rel-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 2px;
}

.tp-10__rel-pill {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}

.tp-10 {
  width: 100%;
  min-height: 100vh;
  background: #111116;
  /* Left room — kchord tips pop to the LEFT of each shortcut row,
       ~260px wide. */
  padding: 36px 28px 36px 320px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.tp-10__inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tp-10__t {
  position: relative;
}

.tp-10__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: help;
  transition: background .12s;
}

.tp-10__t:hover .tp-10__row {
  background: rgba(255, 255, 255, 0.04);
}

.tp-10__label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

.tp-10__keys {
  display: flex;
  gap: 4px;
  align-items: center;
}

.tp-10__key {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  line-height: 1;
  letter-spacing: 0.02em;
}

.tp-10__plus {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
}

.tp-10__tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  width: 260px;
  background: #1c1c24;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  text-align: left;
}

.tp-10__t:hover .tp-10__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}

.tp-10__top {
  padding: 14px 14px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tp-10__action {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 7px;
}

.tp-10__keys-big {
  display: flex;
  gap: 5px;
  align-items: center;
}

.tp-10__key-big {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}

.tp-10__plus-big {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}

.tp-10__desc {
  padding: 11px 14px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.55;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'Inter', system-ui, sans-serif;
}

.tp-10__when {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tp-10__when-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tp-10__when-item {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 4px;
  padding-left: 10px;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.4;
}

.tp-10__when-item::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  top: -1px;
}

.tp-10__related {
  padding: 10px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tp-10__rel-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 2px;
}

.tp-10__rel-pill {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}

Here's a working CSS Tooltip from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Keyboard Shortcut Card
Source: https://codefronts.com/snippets/css-tooltips/keyboard-shortcut-card/

A list of shortcuts where each row pops out a full reference card — large action title, big keycaps, plain-English description, three "when to use" bullets, and a related-shortcuts pill row. A richer companion to the compact keycap-pill demo earlier in this collection.
## HTML
```html
<div class="tp-10">
  <div class="tp-10__inner">
    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Save file</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">S</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Save File</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">S</span></div>
        </div>
        <div class="tp-10__desc">Saves the current file to disk immediately. If the file has never been saved, opens a Save As dialog to choose a name and location.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">After every meaningful change to preserve work</div>
          <div class="tp-10__when-item">Before switching branches or running tests</div>
          <div class="tp-10__when-item">Before closing the editor or tab</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ ⇧ S — Save As</div>
          <div class="tp-10__rel-pill">⌘ ⌥ S — Save All</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Undo</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">Z</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Undo</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">Z</span></div>
        </div>
        <div class="tp-10__desc">Reverses the last editing action, stepping backwards through the undo history one action at a time. History is preserved across saves.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">After accidentally deleting or overwriting text</div>
          <div class="tp-10__when-item">To compare before/after a refactor</div>
          <div class="tp-10__when-item">To recover from an unwanted auto-format</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ ⇧ Z — Redo</div>
          <div class="tp-10__rel-pill">⌘ K U — Clear history</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Command palette</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">⇧</span><span class="tp-10__plus">+</span><span class="tp-10__key">P</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Command Palette</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">⇧</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">P</span></div>
        </div>
        <div class="tp-10__desc">Opens a searchable list of every editor command, extension action, and setting. The fastest way to trigger any feature without memorising its location.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">To find any command without digging through menus</div>
          <div class="tp-10__when-item">To run a formatter, linter, or task</div>
          <div class="tp-10__when-item">To change settings quickly by name</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ P — Quick open file</div>
          <div class="tp-10__rel-pill">⌘ ⇧ O — Go to symbol</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Find in file</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">F</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Find in File</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">F</span></div>
        </div>
        <div class="tp-10__desc">Opens an inline search bar. Supports plain text, regular expressions, and case-sensitive matching. Highlights all occurrences inside the active file.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">To locate a variable, function, or string in the file</div>
          <div class="tp-10__when-item">To count occurrences of a term before refactoring</div>
          <div class="tp-10__when-item">With regex to find patterns (e.g. unused imports)</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ H — Find &amp; Replace</div>
          <div class="tp-10__rel-pill">⌘ ⇧ F — Find in workspace</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Toggle comment</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">/</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Toggle Comment</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">/</span></div>
        </div>
        <div class="tp-10__desc">Toggles line comments on the current line or all selected lines. Uses the correct comment syntax for the file's language automatically.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">To temporarily disable a block of code for debugging</div>
          <div class="tp-10__when-item">To add an explanatory comment above a function</div>
          <div class="tp-10__when-item">To comment multiple lines at once (select first)</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ ⇧ / — Block comment</div>
          <div class="tp-10__rel-pill">⌘ K C — Add comment</div>
        </div>
      </div>
    </div>
  </div>
</div>
```
## CSS
```css
.tp-10 {
  width: 100%;
  min-height: 100vh;
  background: #111116;
  /* Left room — kchord tips pop to the LEFT of each shortcut row,
       ~260px wide. */
  padding: 36px 28px 36px 320px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.tp-10__inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tp-10__t {
  position: relative;
}

.tp-10__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: help;
  transition: background .12s;
}

.tp-10__t:hover .tp-10__row {
  background: rgba(255, 255, 255, 0.04);
}

.tp-10__label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

.tp-10__keys {
  display: flex;
  gap: 4px;
  align-items: center;
}

.tp-10__key {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  line-height: 1;
  letter-spacing: 0.02em;
}

.tp-10__plus {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
}

.tp-10__tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  width: 260px;
  background: #1c1c24;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  text-align: left;
}

.tp-10__t:hover .tp-10__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}

.tp-10__top {
  padding: 14px 14px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tp-10__action {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 7px;
}

.tp-10__keys-big {
  display: flex;
  gap: 5px;
  align-items: center;
}

.tp-10__key-big {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}

.tp-10__plus-big {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}

.tp-10__desc {
  padding: 11px 14px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.55;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'Inter', system-ui, sans-serif;
}

.tp-10__when {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tp-10__when-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tp-10__when-item {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 4px;
  padding-left: 10px;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.4;
}

.tp-10__when-item::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  top: -1px;
}

.tp-10__related {
  padding: 10px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tp-10__rel-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 2px;
}

.tp-10__rel-pill {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS Tooltip from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Keyboard Shortcut Card
Source: https://codefronts.com/snippets/css-tooltips/keyboard-shortcut-card/

A list of shortcuts where each row pops out a full reference card — large action title, big keycaps, plain-English description, three "when to use" bullets, and a related-shortcuts pill row. A richer companion to the compact keycap-pill demo earlier in this collection.
## HTML
```html
<div class="tp-10">
  <div class="tp-10__inner">
    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Save file</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">S</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Save File</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">S</span></div>
        </div>
        <div class="tp-10__desc">Saves the current file to disk immediately. If the file has never been saved, opens a Save As dialog to choose a name and location.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">After every meaningful change to preserve work</div>
          <div class="tp-10__when-item">Before switching branches or running tests</div>
          <div class="tp-10__when-item">Before closing the editor or tab</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ ⇧ S — Save As</div>
          <div class="tp-10__rel-pill">⌘ ⌥ S — Save All</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Undo</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">Z</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Undo</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">Z</span></div>
        </div>
        <div class="tp-10__desc">Reverses the last editing action, stepping backwards through the undo history one action at a time. History is preserved across saves.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">After accidentally deleting or overwriting text</div>
          <div class="tp-10__when-item">To compare before/after a refactor</div>
          <div class="tp-10__when-item">To recover from an unwanted auto-format</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ ⇧ Z — Redo</div>
          <div class="tp-10__rel-pill">⌘ K U — Clear history</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Command palette</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">⇧</span><span class="tp-10__plus">+</span><span class="tp-10__key">P</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Command Palette</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">⇧</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">P</span></div>
        </div>
        <div class="tp-10__desc">Opens a searchable list of every editor command, extension action, and setting. The fastest way to trigger any feature without memorising its location.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">To find any command without digging through menus</div>
          <div class="tp-10__when-item">To run a formatter, linter, or task</div>
          <div class="tp-10__when-item">To change settings quickly by name</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ P — Quick open file</div>
          <div class="tp-10__rel-pill">⌘ ⇧ O — Go to symbol</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Find in file</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">F</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Find in File</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">F</span></div>
        </div>
        <div class="tp-10__desc">Opens an inline search bar. Supports plain text, regular expressions, and case-sensitive matching. Highlights all occurrences inside the active file.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">To locate a variable, function, or string in the file</div>
          <div class="tp-10__when-item">To count occurrences of a term before refactoring</div>
          <div class="tp-10__when-item">With regex to find patterns (e.g. unused imports)</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ H — Find &amp; Replace</div>
          <div class="tp-10__rel-pill">⌘ ⇧ F — Find in workspace</div>
        </div>
      </div>
    </div>

    <div class="tp-10__t">
      <div class="tp-10__row">
        <span class="tp-10__label">Toggle comment</span>
        <span class="tp-10__keys"><span class="tp-10__key">⌘</span><span class="tp-10__plus">+</span><span class="tp-10__key">/</span></span>
      </div>
      <div class="tp-10__tip">
        <div class="tp-10__top">
          <div class="tp-10__action">Toggle Comment</div>
          <div class="tp-10__keys-big"><span class="tp-10__key-big">⌘</span><span class="tp-10__plus-big">+</span><span class="tp-10__key-big">/</span></div>
        </div>
        <div class="tp-10__desc">Toggles line comments on the current line or all selected lines. Uses the correct comment syntax for the file's language automatically.</div>
        <div class="tp-10__when">
          <div class="tp-10__when-label">When to use</div>
          <div class="tp-10__when-item">To temporarily disable a block of code for debugging</div>
          <div class="tp-10__when-item">To add an explanatory comment above a function</div>
          <div class="tp-10__when-item">To comment multiple lines at once (select first)</div>
        </div>
        <div class="tp-10__related">
          <div class="tp-10__rel-label">Related</div>
          <div class="tp-10__rel-pill">⌘ ⇧ / — Block comment</div>
          <div class="tp-10__rel-pill">⌘ K C — Add comment</div>
        </div>
      </div>
    </div>
  </div>
</div>
```
## CSS
```css
.tp-10 {
  width: 100%;
  min-height: 100vh;
  background: #111116;
  /* Left room — kchord tips pop to the LEFT of each shortcut row,
       ~260px wide. */
  padding: 36px 28px 36px 320px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.tp-10__inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tp-10__t {
  position: relative;
}

.tp-10__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: help;
  transition: background .12s;
}

.tp-10__t:hover .tp-10__row {
  background: rgba(255, 255, 255, 0.04);
}

.tp-10__label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}

.tp-10__keys {
  display: flex;
  gap: 4px;
  align-items: center;
}

.tp-10__key {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  line-height: 1;
  letter-spacing: 0.02em;
}

.tp-10__plus {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
}

.tp-10__tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  width: 260px;
  background: #1c1c24;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .2s;
  z-index: 30;
  overflow: hidden;
  text-align: left;
}

.tp-10__t:hover .tp-10__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}

.tp-10__top {
  padding: 14px 14px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tp-10__action {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 7px;
}

.tp-10__keys-big {
  display: flex;
  gap: 5px;
  align-items: center;
}

.tp-10__key-big {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}

.tp-10__plus-big {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}

.tp-10__desc {
  padding: 11px 14px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.55;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'Inter', system-ui, sans-serif;
}

.tp-10__when {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tp-10__when-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.tp-10__when-item {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 4px;
  padding-left: 10px;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.4;
}

.tp-10__when-item::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  top: -1px;
}

.tp-10__related {
  padding: 10px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tp-10__rel-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 2px;
}

.tp-10__rel-pill {
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}
```

How this works

Each row is a two-column flex layout inside .tp-10__row: an action label on the left, a stack of small keycaps on the right, sitting on the #111116 canvas in JetBrains Mono. The compact keycap chips .tp-10__key are 10.5px 500-weight glyphs in rgba(255, 255, 255, 0.7), printed on a rgba(255, 255, 255, 0.07) face with a 1px top border and a heavier 2px bottom border in rgba(255, 255, 255, 0.18) — the two-tone edge that reads as a physical key from a five-foot distance. A muted .tp-10__plus separator at 9px rgba(255, 255, 255, 0.2) connects the modifier and letter without competing with them.

The card diverges from a compact keycap chip on purpose. On hover, .tp-10__tip opens to the LEFT at right: calc(100% + 12px), 260px wide, and unpacks the shortcut into four sections. A header holds a 15px 600 action title over larger .tp-10__key-big keycaps at 11.5px with a 3px bottom border — the Superhuman and Slack command-palette register. A 11.5px Inter description block at rgba(255, 255, 255, 0.45) explains the command in plain English. A three-item bullet When-to-use list in 10.5px Inter gives the contextual scenarios. A row of related-shortcut pills closes the card with sibling commands.

The transition runs opacity, visibility, and a translateX(-6px) lift over 200ms through cubic-bezier(0.22, 1, 0.36, 1), with visibility delayed by the same 200ms on close so the card stays untouchable when hidden. Semantic HTML, hand-coded, no dependencies, INP-safe, framework-agnostic, scoped under .tp-10.

Make it yours

Retarget for Windows and Linux by swapping the command glyph for Ctrl inside both .tp-10__key and .tp-10__key-big; detect the platform at render time and emit one or the other keycap so the same list serves cross-platform users without a manual toggle.
Extend the card to hold a short animated GIF or SVG showing the shortcut in action; add a fifth section between .tp-10__desc and .tp-10__when, cap the media height at 120px, and gate its playback with prefers-reduced-motion so the still frame remains meaningful.
Group shortcuts by category by wrapping every N rows in a .tp-10__group block with a section label; keep the tooltip positioning intact because .tp-10__t remains the direct positioning context regardless of intermediate grouping wrappers.
Turn the related-shortcut pills into clickable links that scroll to the target row by giving each .tp-10__rel-pill an anchor wrapper and a matching id on the row; add scroll-behavior: smooth and scroll-margin-top so the anchor lands cleanly beneath any sticky header.
Add a per-row search input above .tp-10__inner and filter rows with a class toggle such as .tp-10__t--hidden that sets display: none; the tooltip machinery is scoped per row and needs no adjustment, and the card overlays surviving rows once matches are narrowed.

Gotchas — read before shipping

The tooltip pops to the LEFT via right: calc(100% + 12px). On narrow viewports and RTL locales it drives layout off-screen. In an :dir(rtl) selector, mirror the anchor to left: calc(100% + 12px) and flip the translate; better yet, migrate to inset-inline-end so the logical property handles direction automatically (WCAG SC 1.4.10 reflow at 320px).
Keycaps carry the shortcut's meaning through glyphs the screen reader may skip — command, shift, option narrate inconsistently across NVDA, JAWS, VoiceOver, and TalkBack. Add an aria-label on each .tp-10__keys group with the readable form ("Command Shift P"), and wrap the visual glyphs in aria-hidden="true" spans (WCAG SC 1.3.1, 4.1.2).
Hover-only reveal cuts off keyboard users — precisely the audience most likely to be reading a shortcut reference. Promote each .tp-10__t to a focusable element with tabindex="0" and extend the selector to .tp-10__t:hover, .tp-10__t:focus-within; better still, drive open state through the Popover API with popovertarget for click and Enter (WCAG SC 2.1.1).
The card's 260px width overlaps neighbouring rows during hover chases. If the pointer travels from a shortcut into a related pill and out the far edge, hover flickers on and off. Add a transparent bridge via .tp-10__t::before spanning the 12px gap so the pointer never crosses a hover-free zone (WCAG SC 2.5.5 target-size relief).
The mono glyphs render at 10.5-11.5px, near the lower edge of legibility for readers with reduced vision. Verify contrast: rgba(255, 255, 255, 0.7) on rgba(255, 255, 255, 0.07) mixed with #111116 resolves to roughly 8.5:1 on paper but drops when the row-hover rgba(255, 255, 255, 0.04) wash is added — recalculate at rest and hover states for WCAG SC 1.4.3.
Animating opacity plus transform on hover-in and hover-out fires twice per row visit. Users with vestibular sensitivity feel the drift on rapid list scans. Wrap the transitions in @media (prefers-reduced-motion: reduce) and flip the tooltip to an instant show-hide, honoring WCAG SC 2.3.3 without losing the affordance.

Browser support

Chrome	Safari	Firefox	Edge
88+	14+	78+	88+

The unicode keycap glyphs render from the system font stack — verified across San Francisco, Segoe UI, and Ubuntu. The two-tone keycap edge uses standard border shorthand only. If you adopt logical properties for RTL, ship inset-inline-end behind @supports (inset-inline-end: 0).

Techniques used in this demo

box-shadowMDN ↗transitionMDN ↗