Edit Tooltip

Name

Also known as (comma separated)

Brief definition Small explanatory overlay.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Trigger label", "default": "Save changes" }, { "id": "text", "type": "text", "label": "Tooltip text", "default": "Saves your changes to the cloud." }, { "id": "placement", "type": "select", "label": "Placement", "default": "top", "options": [ "top", "right", "bottom" ] }, { "id": "accent", "type": "color", "label": "Colour", "default": "#241430", "presets": [ "#241430", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020" ] }, { "id": "width", "type": "number", "label": "Max width", "default": 180, "min": 120, "max": 260, "step": 20 }, { "id": "visible", "type": "toggle", "label": "Show tooltip", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"tooltip-demo\">\n <button type=\"button\" class=\"tooltip-trigger\" aria-describedby=\"tooltip-1\">{{label}}</button>\n <span role=\"tooltip\" id=\"tooltip-1\" class=\"tooltip tooltip--{{placement}}{{#if visible}} tooltip--visible{{/if}}\" style=\"max-width:{{width}}px;background:{{accent}};\">\n {{text}}\n <span class=\"tooltip__arrow\" style=\"background:{{accent}};\" aria-hidden=\"true\"></span>\n </span>\n</div>\n<style>\n.tooltip-demo { position: relative; min-height: 200px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }\n.tooltip-trigger { font: 500 14px system-ui, sans-serif; padding: 9px 16px; border-radius: 8px; border: 1.5px solid #24143033; background: #FAF7F2; color: #241430; cursor: pointer; }\n.tooltip-trigger:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n.tooltip { position: absolute; color: #FAF7F2; font: 500 13px/1.4 system-ui, sans-serif; padding: 7px 11px; border-radius: 8px; box-shadow: 0 10px 22px rgba(36,20,48,.24); opacity: 0; visibility: hidden; pointer-events: none; text-align: center; box-sizing: border-box; }\n@media (prefers-reduced-motion: no-preference) {\n .tooltip { transition: opacity .15s ease; }\n}\n.tooltip-trigger:hover + .tooltip, .tooltip-trigger:focus-visible + .tooltip, .tooltip--visible { opacity: 1; visibility: visible; }\n.tooltip--top { bottom: calc(50% + 34px); left: 50%; transform: translateX(-50%); }\n.tooltip--bottom { top: calc(50% + 34px); left: 50%; transform: translateX(-50%); }\n.tooltip--right { left: calc(50% + 70px); top: 50%; transform: translateY(-50%); }\n.tooltip__arrow { position: absolute; width: 8px; height: 8px; transform: rotate(45deg); }\n.tooltip--top .tooltip__arrow { bottom: -4px; left: 50%; margin-left: -4px; }\n.tooltip--bottom .tooltip__arrow { top: -4px; left: 50%; margin-left: -4px; }\n.tooltip--right .tooltip__arrow { left: -4px; top: 50%; margin-top: -4px; }\n</style>", "tailwind": "<div class=\"relative min-h-[200px] flex items-center justify-center box-border\">\n <button type=\"button\" aria-describedby=\"tooltip-tw-1\" class=\"px-4 py-2.5 rounded-lg text-sm font-medium border-[1.5px] border-[#24143033] bg-[#FAF7F2] text-[#241430]\">{{label}}</button>\n <span role=\"tooltip\" id=\"tooltip-tw-1\" class=\"tooltip-tw tooltip-tw--{{placement}}{{#if visible}} tooltip-tw--visible{{/if}} absolute text-[#FAF7F2] text-[13px] leading-snug px-2.5 py-1.5 rounded-lg shadow-2xl text-center box-border\" style=\"max-width:{{width}}px;background:{{accent}};\">\n {{text}}\n <span aria-hidden=\"true\" class=\"tooltip-tw__arrow absolute w-2 h-2 rotate-45\" style=\"background:{{accent}};\"></span>\n </span>\n</div>\n<style>\n.tooltip-tw { opacity: 0; visibility: hidden; pointer-events: none; }\n@media (prefers-reduced-motion: no-preference) {\n .tooltip-tw { transition: opacity .15s ease; }\n}\nbutton:hover + .tooltip-tw, button:focus-visible + .tooltip-tw, .tooltip-tw--visible { opacity: 1; visibility: visible; }\n.tooltip-tw--top { bottom: calc(50% + 34px); left: 50%; transform: translateX(-50%); }\n.tooltip-tw--bottom { top: calc(50% + 34px); left: 50%; transform: translateX(-50%); }\n.tooltip-tw--right { left: calc(50% + 70px); top: 50%; transform: translateY(-50%); }\n.tooltip-tw--top .tooltip-tw__arrow { bottom: -4px; left: 50%; margin-left: -4px; }\n.tooltip-tw--bottom .tooltip-tw__arrow { top: -4px; left: 50%; margin-left: -4px; }\n.tooltip-tw--right .tooltip-tw__arrow { left: -4px; top: 50%; margin-top: -4px; }\n</style>", "react": "import { useState } from \"react\";\n\nexport function Tooltip({\n label = \"{{label}}\",\n text = \"{{text}}\",\n placement = \"{{placement}}\",\n accent = \"{{accent}}\",\n width = {{width}},\n visible: initialVisible = {{visible}},\n}) {\n const [hovered, setHovered] = useState(false);\n const visible = hovered || initialVisible;\n const posStyle = {\n top: { bottom: \"calc(50% + 34px)\", left: \"50%\", transform: \"translateX(-50%)\" },\n bottom: { top: \"calc(50% + 34px)\", left: \"50%\", transform: \"translateX(-50%)\" },\n right: { left: \"calc(50% + 70px)\", top: \"50%\", transform: \"translateY(-50%)\" },\n }[placement] ?? {};\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 }[placement] ?? {};\n return (\n <div style={{ position: \"relative\", minHeight: 200, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", boxSizing: \"border-box\" }}>\n <button type=\"button\" aria-describedby=\"tooltip-1\"\n onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}\n onFocus={() => setHovered(true)} onBlur={() => setHovered(false)}\n style={{ font: \"500 14px system-ui, sans-serif\", padding: \"9px 16px\", borderRadius: 8,\n border: \"1.5px solid #24143033\", background: \"#FAF7F2\", color: \"#241430\", cursor: \"pointer\" }}>\n {label}\n </button>\n <span role=\"tooltip\" id=\"tooltip-1\" className=\"tooltip-bubble\" style={{ position: \"absolute\", color: \"#FAF7F2\", fontSize: 13,\n lineHeight: 1.4, fontWeight: 500, padding: \"7px 11px\", borderRadius: 8, boxShadow: \"0 10px 22px rgba(36,20,48,.24)\",\n opacity: visible ? 1 : 0, visibility: visible ? \"visible\" : \"hidden\",\n pointerEvents: \"none\", textAlign: \"center\", boxSizing: \"border-box\", maxWidth: width, background: accent, ...posStyle }}>\n {text}\n <span aria-hidden=\"true\" style={{ position: \"absolute\", width: 8, height: 8, transform: \"rotate(45deg)\", background: accent, ...arrowStyle }} />\n </span>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .tooltip-bubble { transition: opacity .15s ease; }\n }\n `}</style>\n </div>\n );\n}" }