{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "tooltip",
  "name": "Tooltip",
  "category": "Overlays",
  "description": "Short labels on hover and focus. Pure CSS; the text is a real element referenced by aria-describedby.",
  "tags": [
    "tooltip",
    "hint",
    "title",
    "label"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "tooltip",
      "hover hint",
      "icon label"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/tooltip",
  "markdownUrl": "https://mian.ro/ai/components/tooltip.md",
  "classes": [
    {
      "name": "mn-tooltip",
      "description": "Wrapper around the trigger and a role=\"tooltip\" element."
    },
    {
      "name": "mn-tooltip-bottom · mn-tooltip-left · mn-tooltip-right",
      "description": "Placement (top is default)."
    }
  ],
  "accessibility": [
    "Link the tooltip with aria-describedby so screen readers read it. Tooltips appear on keyboard focus, not only hover. Never put essential or interactive content in a tooltip."
  ],
  "examples": [
    {
      "title": "Placements",
      "description": null,
      "html": "<span class=\"mn-tooltip\"><button class=\"mn-btn mn-btn-outline\" aria-describedby=\"tt1\">Top</button><span role=\"tooltip\" id=\"tt1\">Add to library</span></span>\n<span class=\"mn-tooltip mn-tooltip-bottom\"><button class=\"mn-btn mn-btn-outline\" aria-describedby=\"tt2\">Bottom</button><span role=\"tooltip\" id=\"tt2\">Opens in a new tab</span></span>\n<span class=\"mn-tooltip mn-tooltip-right\"><button class=\"mn-btn mn-btn-icon mn-btn-outline\" aria-label=\"Copy\" aria-describedby=\"tt3\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"9\" width=\"12\" height=\"12\" rx=\"2\"/><path d=\"M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1\"/></svg></button><span role=\"tooltip\" id=\"tt3\">Copy to clipboard</span></span>"
    }
  ],
  "css": ".mn-tooltip { position: relative; display: inline-flex; }\n/* Hidden tooltips are display:none so they never widen the page; they fade\n   in with @starting-style and fade out with allow-discrete transitions. */\n.mn-tooltip > [role=\"tooltip\"] {\n  position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 8px);\n  display: none; width: max-content; max-width: min(16rem, calc(100vw - 1.5rem)); padding: .35rem .6rem;\n  border-radius: min(6px, var(--mn-radius-field));\n  background: var(--mn-fg); color: var(--mn-bg);\n  font: 500 .75rem/1.4 var(--mn-font); text-align: center;\n  pointer-events: none; opacity: 0; transform: translate(-50%, 3px);\n  transition: opacity var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease), display var(--mn-duration) allow-discrete;\n  transition-delay: 0ms;\n}\n.mn-tooltip:hover > [role=\"tooltip\"], .mn-tooltip:focus-within > [role=\"tooltip\"] { display: block; opacity: 1; transform: translate(-50%, 0); transition-delay: 350ms; }\n.mn-tooltip:focus-within > [role=\"tooltip\"] { transition-delay: 0ms; }\n.mn-tooltip-bottom > [role=\"tooltip\"] { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -3px); }\n.mn-tooltip-right > [role=\"tooltip\"] { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(-3px, -50%); }\n.mn-tooltip-left > [role=\"tooltip\"] { left: auto; right: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(3px, -50%); }\n.mn-tooltip-right:is(:hover, :focus-within) > [role=\"tooltip\"], .mn-tooltip-left:is(:hover, :focus-within) > [role=\"tooltip\"] { transform: translate(0, -50%); }\n@starting-style {\n  .mn-tooltip:is(:hover, :focus-within) > [role=\"tooltip\"] { opacity: 0; transform: translate(-50%, 3px); }\n  .mn-tooltip-bottom:is(:hover, :focus-within) > [role=\"tooltip\"] { transform: translate(-50%, -3px); }\n  .mn-tooltip-right:is(:hover, :focus-within) > [role=\"tooltip\"] { transform: translate(-3px, -50%); }\n  .mn-tooltip-left:is(:hover, :focus-within) > [role=\"tooltip\"] { transform: translate(3px, -50%); }\n}\n@media (hover: none) { .mn-tooltip:hover:not(:focus-within) > [role=\"tooltip\"] { display: none; } }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/tooltip.json"
  }
}