Back to CSS Tooltips Service Status Dots Pure CSS
Share
HTML 
<div class="svc-stage">
  <div class="svc-inner">
    <div class="svc-row-wrap">
      <div class="svc-row">
        <span class="svc-dot svc-ok svc-pulse"></span>
        <span class="svc-name">API Gateway</span>
        <span class="svc-pct">99.98%</span>
      </div>
      <span class="svc-tip">
        <span class="svc-tip-head">
          <span class="svc-tip-dot" style="background:#3fb950"></span>
          <span class="svc-tip-name">API Gateway</span>
          <span class="svc-badge svc-badge-ok">Operational</span>
        </span>
        <span class="svc-bars-label">30-day uptime</span>
        <span class="svc-bars">
          <span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:80%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#d29922;height:60%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span>
        </span>
        <span class="svc-metrics">
          <span class="svc-met"><span class="svc-met-label">Uptime</span><span class="svc-met-val svc-met-ok">99.98%</span></span>
          <span class="svc-met"><span class="svc-met-label">p95 latency</span><span class="svc-met-val">38ms</span></span>
          <span class="svc-met"><span class="svc-met-label">Req/min</span><span class="svc-met-val">12.4k</span></span>
        </span>
        <span class="svc-incident">Last incident: <strong>Feb 14 · 18 min partial degradation</strong> — elevated error rates on /auth endpoints. Resolved.</span>
      </span>
    </div>

    <div class="svc-row-wrap">
      <div class="svc-row">
        <span class="svc-dot svc-ok svc-pulse"></span>
        <span class="svc-name">Auth Service</span>
        <span class="svc-pct">100.00%</span>
      </div>
      <span class="svc-tip">
        <span class="svc-tip-head">
          <span class="svc-tip-dot" style="background:#3fb950"></span>
          <span class="svc-tip-name">Auth Service</span>
          <span class="svc-badge svc-badge-ok">Operational</span>
        </span>
        <span class="svc-bars-label">30-day uptime</span>
        <span class="svc-bars">
          <span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span>
        </span>
        <span class="svc-metrics">
          <span class="svc-met"><span class="svc-met-label">Uptime</span><span class="svc-met-val svc-met-ok">100%</span></span>
          <span class="svc-met"><span class="svc-met-label">p95 latency</span><span class="svc-met-val">18ms</span></span>
          <span class="svc-met"><span class="svc-met-label">Token/min</span><span class="svc-met-val">84k</span></span>
        </span>
        <span class="svc-incident">No incidents in the last 90 days.</span>
      </span>
    </div>

    <div class="svc-row-wrap">
      <div class="svc-row">
        <span class="svc-dot svc-ok svc-pulse"></span>
        <span class="svc-name">PostgreSQL Primary</span>
        <span class="svc-pct">99.94%</span>
      </div>
      <span class="svc-tip">
        <span class="svc-tip-head">
          <span class="svc-tip-dot" style="background:#3fb950"></span>
          <span class="svc-tip-name">PostgreSQL Primary</span>
          <span class="svc-badge svc-badge-ok">Operational</span>
        </span>
        <span class="svc-bars-label">30-day uptime</span>
        <span class="svc-bars">
          <span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#f85149;height:40%"></span><span class="svc-bar" style="background:#d29922;height:70%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span>
        </span>
        <span class="svc-metrics">
          <span class="svc-met"><span class="svc-met-label">Uptime</span><span class="svc-met-val svc-met-ok">99.94%</span></span>
          <span class="svc-met"><span class="svc-met-label">p95 latency</span><span class="svc-met-val">6ms</span></span>
          <span class="svc-met"><span class="svc-met-label">Conns</span><span class="svc-met-val">142/500</span></span>
        </span>
        <span class="svc-incident">Last incident: <strong>Mar 2 · 34 min outage</strong> — connection pool exhaustion during traffic spike. Failover to replica triggered.</span>
      </span>
    </div>

    <div class="svc-row-wrap">
      <div class="svc-row">
        <span class="svc-dot svc-warn"></span>
        <span class="svc-name">Email Delivery</span>
        <span class="svc-pct">98.42%</span>
      </div>
      <span class="svc-tip">
        <span class="svc-tip-head">
          <span class="svc-tip-dot" style="background:#d29922"></span>
          <span class="svc-tip-name">Email Delivery</span>
          <span class="svc-badge svc-badge-warn">Degraded</span>
        </span>
        <span class="svc-bars-label">30-day uptime</span>
        <span class="svc-bars">
          <span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#d29922;height:55%"></span><span class="svc-bar" style="background:#d29922;height:50%"></span><span class="svc-bar" style="background:#f85149;height:30%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#3fb950;height:100%"></span><span class="svc-bar" style="background:#d29922;height:60%"></span><span class="svc-bar" style="background:#d29922;height:55%"></span><span class="svc-bar" style="background:#d29922;height:65%"></span><span class="svc-bar" style="background:#d29922;height:58%"></span><span class="svc-bar" style="background:#d29922;height:62%"></span><span class="svc-bar" style="background:#d29922;height:60%"></span><span class="svc-bar" style="background:#d29922;height:57%"></span>
        </span>
        <span class="svc-metrics">
          <span class="svc-met"><span class="svc-met-label">Uptime</span><span class="svc-met-val svc-met-warn">98.42%</span></span>
          <span class="svc-met"><span class="svc-met-label">Delivery</span><span class="svc-met-val svc-met-warn">91.3%</span></span>
          <span class="svc-met"><span class="svc-met-label">Avg delay</span><span class="svc-met-val svc-met-warn">340ms</span></span>
        </span>
        <span class="svc-incident">Active: <strong>Elevated bounce rates on Gmail / Yahoo</strong> — IP reputation issue with third-party relay. Investigation ongoing since May 11.</span>
      </span>
    </div>
  </div>
</div>
CSS 
.svc-stage {
  background: #0d1117;
  /* Right room — status detail tooltip pops to the RIGHT of each row,
     ~280px wide. Without big right padding the tip would be cut off
     by .cf-stage's overflow:hidden on the gallery card. */
  padding: 36px 320px 36px 28px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.svc-inner {
  max-width: 440px;
  margin: 0 auto;
}
.svc-row-wrap {
  position: relative;
}
.svc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: help;
}
.svc-row-wrap:last-child .svc-row { border-bottom: none; }
.svc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.svc-ok    { background: #3fb950; box-shadow: 0 0 6px rgba(63, 185, 80, 0.5); }
.svc-warn  { background: #d29922; box-shadow: 0 0 6px rgba(210, 153, 34, 0.5); }
.svc-down  { background: #f85149; box-shadow: 0 0 6px rgba(248, 81, 73, 0.5); }
.svc-pulse { animation: svc-pulse-anim 2.5s ease-in-out infinite; }
@keyframes svc-pulse-anim {
  0%, 100% { box-shadow: 0 0 6px rgba(63, 185, 80, 0.5); }
  50%      { box-shadow: 0 0 14px rgba(63, 185, 80, 0.8); }
}
.svc-name {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
  letter-spacing: 0.02em;
}
.svc-pct {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
}
.svc-tip {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  width: 280px;
  background: #161b22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.8);
  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;
  display: block;
  text-align: left;
}
.svc-row-wrap:hover .svc-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}
.svc-tip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.svc-tip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.svc-tip-name {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
}
.svc-badge {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.svc-badge-ok   { background: rgba(63, 185, 80, 0.15); color: #3fb950; border: 1px solid rgba(63, 185, 80, 0.25); }
.svc-badge-warn { background: rgba(210, 153, 34, 0.15); color: #d29922; border: 1px solid rgba(210, 153, 34, 0.25); }
.svc-badge-down { background: rgba(248, 81, 73, 0.15); color: #f85149; border: 1px solid rgba(248, 81, 73, 0.25); }
.svc-bars-label {
  display: block;
  padding: 10px 14px 5px;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.svc-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 34px;
  padding: 0 14px 10px;
}
.svc-bar {
  flex: 1;
  border-radius: 1px;
  min-height: 4px;
  display: block;
}
.svc-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.svc-met {
  display: block;
  padding: 10px 13px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.svc-met:last-child { border-right: none; }
.svc-met-label {
  display: block;
  font-size: 7px;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.svc-met-val {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
}
.svc-met-ok   { color: #3fb950; }
.svc-met-warn { color: #d29922; }
.svc-met-down { color: #f85149; }
.svc-incident {
  display: block;
  padding: 9px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.25);
  line-height: 1.5;
  font-family: 'Inter', system-ui, sans-serif;
}
.svc-incident strong {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}