{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "type": "registry:ui",
  "title": "Tooltip (MIAN)",
  "description": "Short labels on hover and focus. Pure CSS; the text is a real element referenced by aria-describedby.",
  "categories": [
    "overlays",
    "tooltip",
    "hint",
    "title",
    "label"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/tooltip.css",
      "type": "registry:file",
      "target": "mian/components/tooltip.css",
      "content": ".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; } }"
    },
    {
      "path": "mian/examples/tooltip.html",
      "type": "registry:file",
      "target": "mian/examples/tooltip.html",
      "content": "<!-- Placements -->\n<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>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/tooltip",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-tooltip",
        "mn-tooltip-bottom · mn-tooltip-left · mn-tooltip-right"
      ],
      "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."
      ],
      "intents": [
        "tooltip",
        "hover hint",
        "icon label"
      ]
    }
  }
}