{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "hover-card",
  "name": "Hover card",
  "category": "Overlays",
  "description": "A preview card that appears when hovering or focusing a link, profiles, link previews, definitions.",
  "tags": [
    "hover card",
    "preview",
    "profile card",
    "link preview",
    "popover on hover"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "link preview",
      "profile preview on hover",
      "definition popup"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/hover-card",
  "markdownUrl": "https://mian.ro/ai/components/hover-card.md",
  "classes": [
    {
      "name": "mn-hover-card",
      "description": "Wrapper around the trigger and the card."
    },
    {
      "name": "mn-hover-card-content",
      "description": "The card (combine with mn-card)."
    },
    {
      "name": "mn-hover-card-start",
      "description": "Align to the start instead of centring."
    }
  ],
  "accessibility": [
    "It appears on keyboard focus as well as hover, after a short delay on hover.",
    "Only put supplementary information in it, never the only way to reach something. The trigger must work on its own."
  ],
  "examples": [
    {
      "title": "Profile preview",
      "description": null,
      "html": "<p>Made by <span class=\"mn-hover-card\"><a class=\"mn-link\" href=\"#\">@btn-group</a>\n  <span class=\"mn-hover-card-content mn-card\"><span class=\"mn-card-body mn-row\" style=\"align-items:flex-start;flex-wrap:nowrap;gap:.75rem;width:17rem\">\n    <span class=\"mn-avatar\">面</span>\n    <span><strong>BTN GROUP SRL</strong><br><span class=\"mn-muted\">Makers of MIAN: 54+ components and many noodles.</span></span>\n  </span></span>\n</span>.</p>"
    }
  ],
  "css": ".mn-hover-card { position: relative; display: inline-block; }\n.mn-hover-card-content {\n  position: absolute; z-index: 60; top: calc(100% + 8px); left: 50%;\n  display: none; width: max-content; max-width: min(20rem, calc(100vw - 1.5rem));\n  opacity: 0; transform: translate(-50%, 4px);\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; box-shadow: var(--mn-shadow-lg);\n}\n.mn-hover-card:hover > .mn-hover-card-content, .mn-hover-card:focus-within > .mn-hover-card-content { display: block; opacity: 1; transform: translate(-50%, 0); transition-delay: 400ms; }\n.mn-hover-card:focus-within > .mn-hover-card-content { transition-delay: 0ms; }\n@starting-style { .mn-hover-card:is(:hover, :focus-within) > .mn-hover-card-content { opacity: 0; transform: translate(-50%, 4px); } }\n.mn-hover-card-start > .mn-hover-card-content { left: 0; transform: translate(0, 4px); }\n.mn-hover-card-start:is(:hover, :focus-within) > .mn-hover-card-content { transform: none; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/hover-card.json"
  }
}