<div class="tbar-stage">
  <div class="tbar-wrap">
    <div class="tbar-bar">
      <span class="tbar-t">
        <button class="tbar-btn tbar-btn-active">B</button>
        <span class="tbar-tip">Bold</span>
      </span>
      <span class="tbar-t">
        <button class="tbar-btn" style="font-style:italic">I</button>
        <span class="tbar-tip">Italic</span>
      </span>
      <span class="tbar-t">
        <button class="tbar-btn" style="text-decoration:underline">U</button>
        <span class="tbar-tip">Underline</span>
      </span>
      <span class="tbar-t">
        <button class="tbar-btn" style="text-decoration:line-through;color:#666">S</button>
        <span class="tbar-tip">Strikethrough</span>
      </span>
      <span class="tbar-sep"></span>
      <span class="tbar-t">
        <button class="tbar-btn"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9v.5A2 2 0 0 1 7 9.5H4a2 2 0 0 1 0-4h1.535c.218-.376.495-.717.82-1z"/><path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4 4 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/></svg></button>
        <span class="tbar-tip">Insert link</span>
      </span>
      <span class="tbar-t">
        <button class="tbar-btn"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/><path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/></svg></button>
        <span class="tbar-tip">Insert image</span>
      </span>
      <span class="tbar-t">
        <button class="tbar-btn tbar-btn-code">&lt;/&gt;</button>
        <span class="tbar-tip">Code block</span>
      </span>
      <span class="tbar-sep"></span>
      <span class="tbar-t">
        <button class="tbar-btn"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg></button>
        <span class="tbar-tip">Bullet list</span>
      </span>
      <span class="tbar-t">
        <button class="tbar-btn"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.235.235 0 0 1 .02-.022z"/></svg></button>
        <span class="tbar-tip">Checklist</span>
      </span>
      <span class="tbar-sep"></span>
      <span class="tbar-t">
        <button class="tbar-btn"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/></svg></button>
        <span class="tbar-tip">Preferences</span>
      </span>
    </div>
  </div>
</div>

.tbar-stage {
  background: #141414;
  /* Top room — labels pop UP from each button, ~30px tall. */
  padding: 80px 28px 60px;
  font-family: system-ui, -apple-system, sans-serif;
}
.tbar-wrap {
  display: flex;
  justify-content: center;
}
.tbar-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #1f1f1f;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 5px;
}
.tbar-sep {
  width: 1px;
  height: 20px;
  background: #2e2e2e;
  margin: 0 4px;
  flex-shrink: 0;
  display: inline-block;
}
.tbar-t {
  position: relative;
  display: inline-block;
}
.tbar-btn {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  transition: background .12s, color .12s;
  border: none;
  background: transparent;
  letter-spacing: 0;
  font-family: inherit;
}
.tbar-btn:hover {
  background: #2a2a2a;
  color: #e0e0e0;
}
.tbar-btn-active {
  background: #2a2a2a;
  color: #fff;
}
.tbar-btn-code {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
}
.tbar-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.tbar-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #18181b;
  color: #fff;
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .14s,
    transform .14s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear .14s;
  z-index: 100;
  line-height: 1;
  display: block;
}
.tbar-t:hover .tbar-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.tbar-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #18181b;
}