Chart Tooltip

Detailed information shown for a data point.

html

<div class="chart-tooltip-demo">
  <svg class="chart-tooltip-demo__spark" viewBox="0 0 160 60" aria-hidden="true">
    <polyline points="4,44 30,36 56,40 82,20 108,26 134,10" class="chart-tooltip-demo__line" />
  </svg>
  <button type="button" class="chart-tooltip-demo__point" style="left:134px;top:30px;" aria-describedby="chart-tooltip-1">
    <span class="chart-tooltip-demo__srtext">Show details for March</span>
  </button>
  <span role="tooltip" id="chart-tooltip-1" class="chart-tooltip-demo__tip chart-tooltip-demo__tip--top" style="background:#241430;">
    <strong>March</strong>: $4,820
    <span class="chart-tooltip-demo__arrow" style="background:#241430;" aria-hidden="true"></span>
  </span>
</div>
<style>
.chart-tooltip-demo { position: relative; width: 160px; height: 100px; font: 13px system-ui, sans-serif; color: #241430; box-sizing: border-box; }
.chart-tooltip-demo__spark { position: absolute; left: 0; top: 20px; width: 160px; height: 60px; overflow: visible; }
.chart-tooltip-demo__line { fill: none; stroke: #24143055; stroke-width: 2; }
.chart-tooltip-demo__point { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #241430; border: 2px solid #FAF7F2; box-shadow: 0 0 0 1.5px #24143055; padding: 0; cursor: pointer; transform: translate(-6px, -6px); }
.chart-tooltip-demo__point:focus-visible { outline: 2px solid #241430; outline-offset: 3px; }
.chart-tooltip-demo__srtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.chart-tooltip-demo__tip { position: absolute; color: #FAF7F2; font-weight: 500; padding: 6px 10px; border-radius: 8px; white-space: nowrap; box-shadow: 0 10px 22px rgba(36,20,48,.24); opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.chart-tooltip-demo__tip { transition: opacity .15s ease; }
}
.chart-tooltip-demo__point:hover + .chart-tooltip-demo__tip, .chart-tooltip-demo__point:focus-visible + .chart-tooltip-demo__tip { opacity: 1; visibility: visible; }
.chart-tooltip-demo__tip--top { left: 134px; top: -6px; transform: translate(-50%, -100%); }
.chart-tooltip-demo__tip--bottom { left: 134px; top: 46px; transform: translate(-50%, 0); }
.chart-tooltip-demo__tip--right { left: 148px; top: 30px; transform: translate(0, -50%); }
.chart-tooltip-demo__arrow { position: absolute; width: 8px; height: 8px; transform: rotate(45deg); }
.chart-tooltip-demo__tip--top .chart-tooltip-demo__arrow { bottom: -4px; left: 50%; margin-left: -4px; }
.chart-tooltip-demo__tip--bottom .chart-tooltip-demo__arrow { top: -4px; left: 50%; margin-left: -4px; }
.chart-tooltip-demo__tip--right .chart-tooltip-demo__arrow { left: -4px; top: 50%; margin-top: -4px; }
</style>

tailwind

<div class="relative box-border font-sans text-[13px] text-[#241430]" style="width:160px;height:100px;">
  <svg class="absolute left-0" style="top:20px;width:160px;height:60px;overflow:visible;" viewBox="0 0 160 60" aria-hidden="true">
    <polyline points="4,44 30,36 56,40 82,20 108,26 134,10" fill="none" stroke="#24143055" stroke-width="2" />
  </svg>
  <button type="button" class="chart-tooltip-tw__point absolute w-3 h-3 rounded-full border-2 p-0 cursor-pointer" style="left:134px;top:30px;background:#241430;border-color:#FAF7F2;box-shadow:0 0 0 1.5px #24143055;transform:translate(-6px,-6px);" aria-describedby="chart-tooltip-tw-1">
    <span class="sr-only">Show details for March</span>
  </button>
  <span role="tooltip" id="chart-tooltip-tw-1" class="chart-tooltip-tw__tip chart-tooltip-tw__tip--top absolute text-[#FAF7F2] font-medium px-2.5 py-1.5 rounded-lg whitespace-nowrap shadow-2xl" style="background:#241430;">
    <strong>March</strong>: $4,820
    <span class="chart-tooltip-tw__arrow absolute w-2 h-2 rotate-45" style="background:#241430;" aria-hidden="true"></span>
  </span>
</div>
<style>
.chart-tooltip-tw__tip { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.chart-tooltip-tw__tip { transition: opacity .15s ease; }
}
.chart-tooltip-tw__point:hover + .chart-tooltip-tw__tip, .chart-tooltip-tw__point:focus-visible + .chart-tooltip-tw__tip { opacity: 1; visibility: visible; }
.chart-tooltip-tw__tip--top { left: 134px; top: -6px; transform: translate(-50%, -100%); }
.chart-tooltip-tw__tip--bottom { left: 134px; top: 46px; transform: translate(-50%, 0); }
.chart-tooltip-tw__tip--right { left: 148px; top: 30px; transform: translate(0, -50%); }
.chart-tooltip-tw__tip--top .chart-tooltip-tw__arrow { bottom: -4px; left: 50%; margin-left: -4px; }
.chart-tooltip-tw__tip--bottom .chart-tooltip-tw__arrow { top: -4px; left: 50%; margin-left: -4px; }
.chart-tooltip-tw__tip--right .chart-tooltip-tw__arrow { left: -4px; top: 50%; margin-top: -4px; }
</style>

react

export function ChartTooltip({
  value = "$4,820",
  label = "March",
  position = "top",
  accent = "#241430",
}) {
  const posStyle = {
    top: { left: 134, top: -6, transform: "translate(-50%, -100%)" },
    bottom: { left: 134, top: 46, transform: "translate(-50%, 0)" },
    right: { left: 148, top: 30, transform: "translate(0, -50%)" },
  }[position] ?? {};
  const arrowStyle = {
    top: { bottom: -4, left: "50%", marginLeft: -4 },
    bottom: { top: -4, left: "50%", marginLeft: -4 },
    right: { left: -4, top: "50%", marginTop: -4 },
  }[position] ?? {};
  return (
    <div style={{ position: "relative", width: 160, height: 100, font: "13px system-ui, sans-serif", color: "#241430", boxSizing: "border-box" }}>
      <svg viewBox="0 0 160 60" style={{ position: "absolute", left: 0, top: 20, width: 160, height: 60, overflow: "visible" }} aria-hidden="true">
        <polyline points="4,44 30,36 56,40 82,20 108,26 134,10" fill="none" stroke="#24143055" strokeWidth="2" />
      </svg>
      <button type="button" aria-describedby="chart-tooltip-react-1" style={{ position: "absolute", left: 134, top: 30, width: 12, height: 12, borderRadius: "50%", background: "#241430", border: "2px solid #FAF7F2", boxShadow: "0 0 0 1.5px #24143055", padding: 0, cursor: "pointer", transform: "translate(-6px, -6px)" }}>
        <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }}>Show details for {label}</span>
      </button>
      <span role="tooltip" id="chart-tooltip-react-1" className="chart-tooltip-react__tip" style={{ position: "absolute", color: "#FAF7F2", fontWeight: 500, padding: "6px 10px", borderRadius: 8, whiteSpace: "nowrap", boxShadow: "0 10px 22px rgba(36,20,48,.24)", background: accent, ...posStyle }}>
        <strong>{label}</strong>: {value}
        <span aria-hidden="true" style={{ position: "absolute", width: 8, height: 8, transform: "rotate(45deg)", background: accent, ...arrowStyle }} />
      </span>
      <style>{".chart-tooltip-react__tip{opacity:0;visibility:hidden;pointer-events:none} button:hover + .chart-tooltip-react__tip, button:focus-visible + .chart-tooltip-react__tip{opacity:1;visibility:visible} @media (prefers-reduced-motion: no-preference) { .chart-tooltip-react__tip{transition:opacity .15s ease;} }"}</style>
    </div>
  );
}