Data Table Cell
A quarterly metrics table where each plain number is a hover target. The popover shows the metric name, large value, change-vs-prior quarter, a three-bar segment breakdown (e.g. SMB / Mid / Enterprise), and a two-piece footer with delta and aggregate context. For analytics dashboards, BI reports, KPI surfaces.
Data Table Cell the 11th of 21 designs in the 21 CSS Tooltips collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="tcell-stage">
<div class="tcell-inner">
<table class="tcell-table">
<thead>
<tr>
<th></th><th>Q1</th><th>Q2</th><th>Q3</th><th>Q4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tcell-row-label">Revenue</td>
<td>
<span class="tcell-t">
<span class="tcell-val">$2.1M</span>
<span class="tcell-tip">
<span class="tcell-head">
<span class="tcell-metric">Revenue · Q1</span>
<span class="tcell-big-row"><span class="tcell-big">$2.1M</span><span class="tcell-change tcell-up">↑ +18% vs Q4</span></span>
</span>
<span class="tcell-bars">
<span class="tcell-bars-label">By segment</span>
<span class="tcell-bar-row"><span class="tcell-bar-name">SMB</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:62%;background:#6366f1"></span></span><span class="tcell-bar-pct">62%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Mid</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:28%;background:#8b5cf6"></span></span><span class="tcell-bar-pct">28%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:10%;background:#a78bfa"></span></span><span class="tcell-bar-pct">10%</span></span>
</span>
<span class="tcell-foot"><span>vs prior: <strong>+$320K</strong></span><span>ARR: <strong>$8.4M</strong></span></span>
</span>
</span>
</td>
<td>
<span class="tcell-t">
<span class="tcell-val">$2.8M</span>
<span class="tcell-tip">
<span class="tcell-head">
<span class="tcell-metric">Revenue · Q2</span>
<span class="tcell-big-row"><span class="tcell-big">$2.8M</span><span class="tcell-change tcell-up">↑ +33% vs Q1</span></span>
</span>
<span class="tcell-bars">
<span class="tcell-bars-label">By segment</span>
<span class="tcell-bar-row"><span class="tcell-bar-name">SMB</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:55%;background:#6366f1"></span></span><span class="tcell-bar-pct">55%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Mid</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:33%;background:#8b5cf6"></span></span><span class="tcell-bar-pct">33%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:12%;background:#a78bfa"></span></span><span class="tcell-bar-pct">12%</span></span>
</span>
<span class="tcell-foot"><span>vs Q1: <strong>+$700K</strong></span><span>ARR: <strong>$11.2M</strong></span></span>
</span>
</span>
</td>
<td>
<span class="tcell-t">
<span class="tcell-val">$3.4M</span>
<span class="tcell-tip">
<span class="tcell-head">
<span class="tcell-metric">Revenue · Q3</span>
<span class="tcell-big-row"><span class="tcell-big">$3.4M</span><span class="tcell-change tcell-up">↑ +21% vs Q2</span></span>
</span>
<span class="tcell-bars">
<span class="tcell-bars-label">By segment</span>
<span class="tcell-bar-row"><span class="tcell-bar-name">SMB</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:48%;background:#6366f1"></span></span><span class="tcell-bar-pct">48%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Mid</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:38%;background:#8b5cf6"></span></span><span class="tcell-bar-pct">38%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:14%;background:#a78bfa"></span></span><span class="tcell-bar-pct">14%</span></span>
</span>
<span class="tcell-foot"><span>vs Q2: <strong>+$600K</strong></span><span>ARR: <strong>$13.6M</strong></span></span>
</span>
</span>
</td>
<td>
<span class="tcell-t">
<span class="tcell-val">$4.2M</span>
<span class="tcell-tip">
<span class="tcell-head">
<span class="tcell-metric">Revenue · Q4</span>
<span class="tcell-big-row"><span class="tcell-big">$4.2M</span><span class="tcell-change tcell-up">↑ +24% vs Q3</span></span>
</span>
<span class="tcell-bars">
<span class="tcell-bars-label">By segment</span>
<span class="tcell-bar-row"><span class="tcell-bar-name">SMB</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:42%;background:#6366f1"></span></span><span class="tcell-bar-pct">42%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Mid</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:38%;background:#8b5cf6"></span></span><span class="tcell-bar-pct">38%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:20%;background:#a78bfa"></span></span><span class="tcell-bar-pct">20%</span></span>
</span>
<span class="tcell-foot"><span>vs Q3: <strong>+$800K</strong></span><span>Year: <strong>$12.5M</strong></span></span>
</span>
</span>
</td>
</tr>
<tr>
<td class="tcell-row-label">Active Users</td>
<td>
<span class="tcell-t">
<span class="tcell-val">12.4K</span>
<span class="tcell-tip">
<span class="tcell-head">
<span class="tcell-metric">Active Users · Q1</span>
<span class="tcell-big-row"><span class="tcell-big">12.4K</span><span class="tcell-change tcell-up">↑ +22%</span></span>
</span>
<span class="tcell-bars">
<span class="tcell-bars-label">By plan</span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Free</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:58%;background:#22c55e"></span></span><span class="tcell-bar-pct">58%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Pro</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:32%;background:#16a34a"></span></span><span class="tcell-bar-pct">32%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:10%;background:#166534"></span></span><span class="tcell-bar-pct">10%</span></span>
</span>
<span class="tcell-foot"><span>New: <strong>+2,240</strong></span><span>DAU/MAU: <strong>41%</strong></span></span>
</span>
</span>
</td>
<td>
<span class="tcell-t">
<span class="tcell-val">18.9K</span>
<span class="tcell-tip">
<span class="tcell-head">
<span class="tcell-metric">Active Users · Q2</span>
<span class="tcell-big-row"><span class="tcell-big">18.9K</span><span class="tcell-change tcell-up">↑ +52%</span></span>
</span>
<span class="tcell-bars">
<span class="tcell-bars-label">By plan</span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Free</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:54%;background:#22c55e"></span></span><span class="tcell-bar-pct">54%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Pro</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:36%;background:#16a34a"></span></span><span class="tcell-bar-pct">36%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:10%;background:#166534"></span></span><span class="tcell-bar-pct">10%</span></span>
</span>
<span class="tcell-foot"><span>New: <strong>+6,500</strong></span><span>DAU/MAU: <strong>44%</strong></span></span>
</span>
</span>
</td>
<td>
<span class="tcell-t">
<span class="tcell-val">24.1K</span>
<span class="tcell-tip">
<span class="tcell-head">
<span class="tcell-metric">Active Users · Q3</span>
<span class="tcell-big-row"><span class="tcell-big">24.1K</span><span class="tcell-change tcell-up">↑ +28%</span></span>
</span>
<span class="tcell-bars">
<span class="tcell-bars-label">By plan</span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Free</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:50%;background:#22c55e"></span></span><span class="tcell-bar-pct">50%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Pro</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:38%;background:#16a34a"></span></span><span class="tcell-bar-pct">38%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:12%;background:#166534"></span></span><span class="tcell-bar-pct">12%</span></span>
</span>
<span class="tcell-foot"><span>New: <strong>+5,200</strong></span><span>DAU/MAU: <strong>47%</strong></span></span>
</span>
</span>
</td>
<td>
<span class="tcell-t">
<span class="tcell-val">31.8K</span>
<span class="tcell-tip">
<span class="tcell-head">
<span class="tcell-metric">Active Users · Q4</span>
<span class="tcell-big-row"><span class="tcell-big">31.8K</span><span class="tcell-change tcell-up">↑ +32%</span></span>
</span>
<span class="tcell-bars">
<span class="tcell-bars-label">By plan</span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Free</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:44%;background:#22c55e"></span></span><span class="tcell-bar-pct">44%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Pro</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:40%;background:#16a34a"></span></span><span class="tcell-bar-pct">40%</span></span>
<span class="tcell-bar-row"><span class="tcell-bar-name">Ent.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:16%;background:#166534"></span></span><span class="tcell-bar-pct">16%</span></span>
</span>
<span class="tcell-foot"><span>New: <strong>+7,700</strong></span><span>YoY: <strong>+156%</strong></span></span>
</span>
</span>
</td>
</tr>
<tr>
<td class="tcell-row-label">Churn</td>
<td><span class="tcell-t"><span class="tcell-val">2.8%</span><span class="tcell-tip"><span class="tcell-head"><span class="tcell-metric">Monthly Churn · Q1</span><span class="tcell-big-row"><span class="tcell-big">2.8%</span><span class="tcell-change tcell-dn">↓ +0.4pp worse</span></span></span><span class="tcell-bars"><span class="tcell-bars-label">Reason</span><span class="tcell-bar-row"><span class="tcell-bar-name">Price</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:42%;background:#ef4444"></span></span><span class="tcell-bar-pct">42%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Feat.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:31%;background:#f87171"></span></span><span class="tcell-bar-pct">31%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Other</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:27%;background:#fca5a5"></span></span><span class="tcell-bar-pct">27%</span></span></span><span class="tcell-foot"><span>Net rev churn: <strong>1.1%</strong></span><span>Win-back: <strong>14%</strong></span></span></span></span></td>
<td><span class="tcell-t"><span class="tcell-val">2.4%</span><span class="tcell-tip"><span class="tcell-head"><span class="tcell-metric">Monthly Churn · Q2</span><span class="tcell-big-row"><span class="tcell-big">2.4%</span><span class="tcell-change tcell-up">↑ −0.4pp better</span></span></span><span class="tcell-bars"><span class="tcell-bars-label">Reason</span><span class="tcell-bar-row"><span class="tcell-bar-name">Price</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:38%;background:#ef4444"></span></span><span class="tcell-bar-pct">38%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Feat.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:34%;background:#f87171"></span></span><span class="tcell-bar-pct">34%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Other</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:28%;background:#fca5a5"></span></span><span class="tcell-bar-pct">28%</span></span></span><span class="tcell-foot"><span>Net rev churn: <strong>0.8%</strong></span><span>Win-back: <strong>18%</strong></span></span></span></span></td>
<td><span class="tcell-t"><span class="tcell-val">2.1%</span><span class="tcell-tip"><span class="tcell-head"><span class="tcell-metric">Monthly Churn · Q3</span><span class="tcell-big-row"><span class="tcell-big">2.1%</span><span class="tcell-change tcell-up">↑ −0.3pp better</span></span></span><span class="tcell-bars"><span class="tcell-bars-label">Reason</span><span class="tcell-bar-row"><span class="tcell-bar-name">Price</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:32%;background:#ef4444"></span></span><span class="tcell-bar-pct">32%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Feat.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:38%;background:#f87171"></span></span><span class="tcell-bar-pct">38%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Other</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:30%;background:#fca5a5"></span></span><span class="tcell-bar-pct">30%</span></span></span><span class="tcell-foot"><span>Net rev churn: <strong>0.6%</strong></span><span>Win-back: <strong>21%</strong></span></span></span></span></td>
<td><span class="tcell-t"><span class="tcell-val">1.8%</span><span class="tcell-tip"><span class="tcell-head"><span class="tcell-metric">Monthly Churn · Q4</span><span class="tcell-big-row"><span class="tcell-big">1.8%</span><span class="tcell-change tcell-up">↑ −0.3pp better</span></span></span><span class="tcell-bars"><span class="tcell-bars-label">Reason</span><span class="tcell-bar-row"><span class="tcell-bar-name">Price</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:28%;background:#ef4444"></span></span><span class="tcell-bar-pct">28%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Feat.</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:40%;background:#f87171"></span></span><span class="tcell-bar-pct">40%</span></span><span class="tcell-bar-row"><span class="tcell-bar-name">Other</span><span class="tcell-bar-track"><span class="tcell-bar-fill" style="width:32%;background:#fca5a5"></span></span><span class="tcell-bar-pct">32%</span></span></span><span class="tcell-foot"><span>Net rev churn: <strong>0.4%</strong></span><span>Year: <strong>−1.0pp</strong></span></span></span></span></td>
</tr>
</tbody>
</table>
</div>
</div> .tcell-stage {
background: #f8f9fa;
/* Top room — table cell tips pop UP from each value (~220px tall). */
padding: 240px 28px 36px;
font-family: 'Inter', system-ui, sans-serif;
}
.tcell-inner {
max-width: 520px;
margin: 0 auto;
}
.tcell-table {
width: 100%;
border-collapse: collapse;
}
.tcell-table thead th {
font-size: 9.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #aaa;
font-weight: 500;
padding: 0 14px 11px;
text-align: right;
}
.tcell-table thead th:first-child { text-align: left; }
.tcell-table tbody tr { border-top: 1px solid #eee; }
.tcell-table tbody tr:hover { background: rgba(0, 0, 0, 0.015); }
.tcell-table tbody td {
padding: 12px 14px;
font-size: 12.5px;
color: #333;
text-align: right;
white-space: nowrap;
}
.tcell-row-label {
color: #777 !important;
font-size: 11px !important;
text-align: left !important;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.tcell-t {
position: relative;
display: inline-block;
cursor: help;
}
.tcell-val {
border-bottom: 1px dashed transparent;
transition: border-color .15s, color .15s;
}
.tcell-t:hover .tcell-val {
border-bottom-color: #aaa;
color: #111;
}
.tcell-tip {
position: absolute;
bottom: calc(100% + 9px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: 240px;
background: #fff;
border-radius: 9px;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.11),
0 2px 8px rgba(0, 0, 0, 0.05);
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;
white-space: normal;
}
.tcell-t:hover .tcell-tip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
.tcell-head {
display: block;
padding: 12px 13px 9px;
border-bottom: 1px solid #f0f0f0;
}
.tcell-metric {
display: block;
font-size: 9.5px;
color: #aaa;
text-transform: uppercase;
letter-spacing: 0.09em;
margin-bottom: 5px;
}
.tcell-big-row {
display: flex;
align-items: baseline;
gap: 8px;
}
.tcell-big {
font-size: 22px;
font-weight: 700;
color: #111;
}
.tcell-change {
font-size: 11px;
font-weight: 600;
}
.tcell-up { color: #16a34a; }
.tcell-dn { color: #dc2626; }
.tcell-bars {
display: block;
padding: 11px 13px 7px;
border-bottom: 1px solid #f0f0f0;
}
.tcell-bars-label {
display: block;
font-size: 7.5px;
color: #bbb;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 7px;
}
.tcell-bar-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px;
}
.tcell-bar-name {
font-size: 9.5px;
color: #999;
width: 32px;
text-align: right;
flex-shrink: 0;
}
.tcell-bar-track {
flex: 1;
height: 5px;
background: #f0f0f0;
border-radius: 3px;
overflow: hidden;
display: block;
}
.tcell-bar-fill {
height: 100%;
border-radius: 3px;
display: block;
}
.tcell-bar-pct {
font-size: 9.5px;
color: #bbb;
width: 28px;
flex-shrink: 0;
text-align: right;
}
.tcell-foot {
display: flex;
justify-content: space-between;
padding: 10px 13px;
font-size: 10.5px;
color: #bbb;
}
.tcell-foot strong {
color: #555;
font-weight: 600;
}