Edit Chart Tooltip

Name

Also known as (comma separated)

Brief definition Detailed information shown for a data point.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "value", "type": "text", "label": "Value", "default": "$4,820" }, { "id": "label", "type": "text", "label": "Data point label", "default": "March" }, { "id": "position", "type": "select", "label": "Tooltip position", "default": "top", "options": [ "top", "right", "bottom" ] }, { "id": "accent", "type": "color", "label": "Colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"chart-tooltip-demo\">\n <svg class=\"chart-tooltip-demo__spark\" viewBox=\"0 0 160 60\" aria-hidden=\"true\">\n <polyline points=\"4,44 30,36 56,40 82,20 108,26 134,10\" class=\"chart-tooltip-demo__line\" />\n </svg>\n <button type=\"button\" class=\"chart-tooltip-demo__point\" style=\"left:134px;top:30px;\" aria-describedby=\"chart-tooltip-1\">\n <span class=\"chart-tooltip-demo__srtext\">Show details for {{label}}</span>\n </button>\n <span role=\"tooltip\" id=\"chart-tooltip-1\" class=\"chart-tooltip-demo__tip chart-tooltip-demo__tip--{{position}}\" style=\"background:{{accent}};\">\n <strong>{{label}}</strong>: {{value}}\n <span class=\"chart-tooltip-demo__arrow\" style=\"background:{{accent}};\" aria-hidden=\"true\"></span>\n </span>\n</div>\n<style>\n.chart-tooltip-demo { position: relative; width: 160px; height: 100px; font: 13px system-ui, sans-serif; color: #241430; box-sizing: border-box; }\n.chart-tooltip-demo__spark { position: absolute; left: 0; top: 20px; width: 160px; height: 60px; overflow: visible; }\n.chart-tooltip-demo__line { fill: none; stroke: #24143055; stroke-width: 2; }\n.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); }\n.chart-tooltip-demo__point:focus-visible { outline: 2px solid #241430; outline-offset: 3px; }\n.chart-tooltip-demo__srtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }\n.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; }\n@media (prefers-reduced-motion: no-preference) {\n.chart-tooltip-demo__tip { transition: opacity .15s ease; }\n}\n.chart-tooltip-demo__point:hover + .chart-tooltip-demo__tip, .chart-tooltip-demo__point:focus-visible + .chart-tooltip-demo__tip { opacity: 1; visibility: visible; }\n.chart-tooltip-demo__tip--top { left: 134px; top: -6px; transform: translate(-50%, -100%); }\n.chart-tooltip-demo__tip--bottom { left: 134px; top: 46px; transform: translate(-50%, 0); }\n.chart-tooltip-demo__tip--right { left: 148px; top: 30px; transform: translate(0, -50%); }\n.chart-tooltip-demo__arrow { position: absolute; width: 8px; height: 8px; transform: rotate(45deg); }\n.chart-tooltip-demo__tip--top .chart-tooltip-demo__arrow { bottom: -4px; left: 50%; margin-left: -4px; }\n.chart-tooltip-demo__tip--bottom .chart-tooltip-demo__arrow { top: -4px; left: 50%; margin-left: -4px; }\n.chart-tooltip-demo__tip--right .chart-tooltip-demo__arrow { left: -4px; top: 50%; margin-top: -4px; }\n</style>", "tailwind": "<div class=\"relative box-border font-sans text-[13px] text-[#241430]\" style=\"width:160px;height:100px;\">\n <svg class=\"absolute left-0\" style=\"top:20px;width:160px;height:60px;overflow:visible;\" viewBox=\"0 0 160 60\" aria-hidden=\"true\">\n <polyline points=\"4,44 30,36 56,40 82,20 108,26 134,10\" fill=\"none\" stroke=\"#24143055\" stroke-width=\"2\" />\n </svg>\n <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\">\n <span class=\"sr-only\">Show details for {{label}}</span>\n </button>\n <span role=\"tooltip\" id=\"chart-tooltip-tw-1\" class=\"chart-tooltip-tw__tip chart-tooltip-tw__tip--{{position}} absolute text-[#FAF7F2] font-medium px-2.5 py-1.5 rounded-lg whitespace-nowrap shadow-2xl\" style=\"background:{{accent}};\">\n <strong>{{label}}</strong>: {{value}}\n <span class=\"chart-tooltip-tw__arrow absolute w-2 h-2 rotate-45\" style=\"background:{{accent}};\" aria-hidden=\"true\"></span>\n </span>\n</div>\n<style>\n.chart-tooltip-tw__tip { opacity: 0; visibility: hidden; pointer-events: none; }\n@media (prefers-reduced-motion: no-preference) {\n.chart-tooltip-tw__tip { transition: opacity .15s ease; }\n}\n.chart-tooltip-tw__point:hover + .chart-tooltip-tw__tip, .chart-tooltip-tw__point:focus-visible + .chart-tooltip-tw__tip { opacity: 1; visibility: visible; }\n.chart-tooltip-tw__tip--top { left: 134px; top: -6px; transform: translate(-50%, -100%); }\n.chart-tooltip-tw__tip--bottom { left: 134px; top: 46px; transform: translate(-50%, 0); }\n.chart-tooltip-tw__tip--right { left: 148px; top: 30px; transform: translate(0, -50%); }\n.chart-tooltip-tw__tip--top .chart-tooltip-tw__arrow { bottom: -4px; left: 50%; margin-left: -4px; }\n.chart-tooltip-tw__tip--bottom .chart-tooltip-tw__arrow { top: -4px; left: 50%; margin-left: -4px; }\n.chart-tooltip-tw__tip--right .chart-tooltip-tw__arrow { left: -4px; top: 50%; margin-top: -4px; }\n</style>", "react": "export function ChartTooltip({\n value = \"{{value}}\",\n label = \"{{label}}\",\n position = \"{{position}}\",\n accent = \"{{accent}}\",\n}) {\n const posStyle = {\n top: { left: 134, top: -6, transform: \"translate(-50%, -100%)\" },\n bottom: { left: 134, top: 46, transform: \"translate(-50%, 0)\" },\n right: { left: 148, top: 30, transform: \"translate(0, -50%)\" },\n }[position] ?? {};\n const arrowStyle = {\n top: { bottom: -4, left: \"50%\", marginLeft: -4 },\n bottom: { top: -4, left: \"50%\", marginLeft: -4 },\n right: { left: -4, top: \"50%\", marginTop: -4 },\n }[position] ?? {};\n return (\n <div style={{ position: \"relative\", width: 160, height: 100, font: \"13px system-ui, sans-serif\", color: \"#241430\", boxSizing: \"border-box\" }}>\n <svg viewBox=\"0 0 160 60\" style={{ position: \"absolute\", left: 0, top: 20, width: 160, height: 60, overflow: \"visible\" }} aria-hidden=\"true\">\n <polyline points=\"4,44 30,36 56,40 82,20 108,26 134,10\" fill=\"none\" stroke=\"#24143055\" strokeWidth=\"2\" />\n </svg>\n <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)\" }}>\n <span style={{ position: \"absolute\", width: 1, height: 1, overflow: \"hidden\", clip: \"rect(0 0 0 0)\" }}>Show details for {label}</span>\n </button>\n <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 }}>\n <strong>{label}</strong>: {value}\n <span aria-hidden=\"true\" style={{ position: \"absolute\", width: 8, height: 8, transform: \"rotate(45deg)\", background: accent, ...arrowStyle }} />\n </span>\n <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>\n </div>\n );\n}" }