21 CSS Tooltips 10 / 21

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.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="kchord-stage">
  <div class="kchord-inner">
    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Save file</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">S</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Save File</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">S</span></div>
        </div>
        <div class="kchord-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="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">After every meaningful change to preserve work</div>
          <div class="kchord-when-item">Before switching branches or running tests</div>
          <div class="kchord-when-item">Before closing the editor or tab</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ ⇧ S — Save As</div>
          <div class="kchord-rel-pill">⌘ ⌥ S — Save All</div>
        </div>
      </div>
    </div>

    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Undo</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">Z</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Undo</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">Z</span></div>
        </div>
        <div class="kchord-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="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">After accidentally deleting or overwriting text</div>
          <div class="kchord-when-item">To compare before/after a refactor</div>
          <div class="kchord-when-item">To recover from an unwanted auto-format</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ ⇧ Z — Redo</div>
          <div class="kchord-rel-pill">⌘ K U — Clear history</div>
        </div>
      </div>
    </div>

    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Command palette</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">⇧</span><span class="kchord-plus">+</span><span class="kchord-key">P</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Command Palette</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">⇧</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">P</span></div>
        </div>
        <div class="kchord-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="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">To find any command without digging through menus</div>
          <div class="kchord-when-item">To run a formatter, linter, or task</div>
          <div class="kchord-when-item">To change settings quickly by name</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ P — Quick open file</div>
          <div class="kchord-rel-pill">⌘ ⇧ O — Go to symbol</div>
        </div>
      </div>
    </div>

    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Find in file</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">F</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Find in File</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">F</span></div>
        </div>
        <div class="kchord-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="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">To locate a variable, function, or string in the file</div>
          <div class="kchord-when-item">To count occurrences of a term before refactoring</div>
          <div class="kchord-when-item">With regex to find patterns (e.g. unused imports)</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ H — Find &amp; Replace</div>
          <div class="kchord-rel-pill">⌘ ⇧ F — Find in workspace</div>
        </div>
      </div>
    </div>

    <div class="kchord-t">
      <div class="kchord-row">
        <span class="kchord-label">Toggle comment</span>
        <span class="kchord-keys"><span class="kchord-key">⌘</span><span class="kchord-plus">+</span><span class="kchord-key">/</span></span>
      </div>
      <div class="kchord-tip">
        <div class="kchord-top">
          <div class="kchord-action">Toggle Comment</div>
          <div class="kchord-keys-big"><span class="kchord-key-big">⌘</span><span class="kchord-plus-big">+</span><span class="kchord-key-big">/</span></div>
        </div>
        <div class="kchord-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="kchord-when">
          <div class="kchord-when-label">When to use</div>
          <div class="kchord-when-item">To temporarily disable a block of code for debugging</div>
          <div class="kchord-when-item">To add an explanatory comment above a function</div>
          <div class="kchord-when-item">To comment multiple lines at once (select first)</div>
        </div>
        <div class="kchord-related">
          <div class="kchord-rel-label">Related</div>
          <div class="kchord-rel-pill">⌘ ⇧ / — Block comment</div>
          <div class="kchord-rel-pill">⌘ K C — Add comment</div>
        </div>
      </div>
    </div>
  </div>
</div>
.kchord-stage {
  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;
}
.kchord-inner {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kchord-t {
  position: relative;
}
.kchord-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: help;
  transition: background .12s;
}
.kchord-t:hover .kchord-row {
  background: rgba(255, 255, 255, 0.04);
}
.kchord-label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.5);
}
.kchord-keys {
  display: flex;
  gap: 4px;
  align-items: center;
}
.kchord-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;
}
.kchord-plus {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.2);
}
.kchord-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;
}
.kchord-t:hover .kchord-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
.kchord-top {
  padding: 14px 14px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.kchord-action {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 7px;
}
.kchord-keys-big {
  display: flex;
  gap: 5px;
  align-items: center;
}
.kchord-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);
}
.kchord-plus-big {
  color: rgba(255, 255, 255, 0.2);
  font-size: 11px;
}
.kchord-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;
}
.kchord-when {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.kchord-when-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kchord-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;
}
.kchord-when-item::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
  top: -1px;
}
.kchord-related {
  padding: 10px 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.kchord-rel-label {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 2px;
}
.kchord-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);
}

More from 21 CSS Tooltips

Editorial FootnoteProfile CardInventory TooltipGlossary Word CardService Status DotsTeam Avatar CardData Table CellContent Tag CardAirport Departures BoardRecipe Ingredient CardOrion Constellation ChartPeriodic Table Element
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →