{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "title": "Tooltip",
  "description": "Infobulle positionnée via CSS Anchor Positioning (+ polyfill).",
  "files": [
    {
      "path": "registry/valraiso/tooltip/tooltip.astro",
      "content": "---\nimport styles from \"./tooltip.module.css\";\n\n/**\n * Tooltip — infobulle positionnée via l'API CSS Anchor Positioning.\n *\n * S'affiche au survol ou au focus du déclencheur, avec repli automatique\n * (haut / gauche / droite) si l'espace manque sous l'ancre.\n *\n * Slots :\n *  - `trigger` : l'élément déclencheur (texte, icône, bouton…).\n *  - `message` : le contenu de l'infobulle.\n *\n * Personnalisation :\n *  - `class` : classe(s) ajoutée(s) au conteneur racine.\n *  - variables CSS : --ads-tooltip-bg, --ads-tooltip-color, --ads-tooltip-padding,\n *    --ads-tooltip-radius, --ads-tooltip-font-size, --ads-tooltip-shadow,\n *    --ads-tooltip-max-width, --ads-tooltip-gap, --ads-tooltip-z-index.\n */\ninterface Props {\n  id?: string;\n  class?: string;\n}\n\nconst { id, class: className } = Astro.props;\nconst uniqueId = id || crypto.randomUUID();\n---\n\n<span class:list={[styles.wrapper, className]} data-tooltip-id={uniqueId}>\n  <span\n    class={styles.trigger}\n    style={{ anchorName: `--trigger-${uniqueId}` }}\n    aria-describedby={`tooltip-${uniqueId}`}\n  >\n    <slot name=\"trigger\" />\n  </span>\n\n  <span\n    id={`tooltip-${uniqueId}`}\n    class={styles.tooltip}\n    role=\"tooltip\"\n    style={{ positionAnchor: `--trigger-${uniqueId}` }}\n  >\n    <slot name=\"message\" />\n  </span>\n</span>\n\n<script>\n  if (!(\"anchorName\" in document.documentElement.style)) {\n    const polyfill = \"https://unpkg.com/@oddbird/css-anchor-positioning\";\n    import(/* @vite-ignore */ polyfill);\n  }\n</script>\n",
      "type": "registry:file",
      "target": "src/components/valraiso/tooltip/tooltip.astro"
    },
    {
      "path": "registry/valraiso/tooltip/tooltip.module.css",
      "content": ".wrapper {\n  display: inline-flex;\n}\n\n.trigger {\n  display: inline-flex;\n}\n\n.tooltip {\n  position: fixed;\n  inset: auto;\n  top: anchor(bottom);\n  justify-self: anchor-center;\n  margin-top: var(--ads-tooltip-gap, 0.5rem);\n\n  position-try-fallbacks:\n    --ads-tooltip-top, --ads-tooltip-left, --ads-tooltip-right;\n\n  /* Apparence */\n  padding: var(--ads-tooltip-padding, 5px 10px);\n  border: none;\n  border-radius: var(--ads-tooltip-radius, var(--ads-radius-200, 5px));\n  background-color: var(--ads-tooltip-bg, #fff);\n  color: var(--ads-tooltip-color, #383838);\n  font-family: var(--ads-sans-serif-font, inherit);\n  font-size: var(--ads-tooltip-font-size, 0.8125rem);\n  line-height: 1.4;\n  width: max-content;\n  max-width: var(--ads-tooltip-max-width, 80vw);\n  z-index: var(--ads-tooltip-z-index, var(--ads-floating-z-index, 10));\n  filter: drop-shadow(var(--ads-tooltip-shadow, 0 2px 4px rgb(0 0 0 / 0.15)));\n  pointer-events: none;\n\n  /* Masqué par défaut */\n  display: none;\n  opacity: 0;\n}\n\n.wrapper:hover .tooltip,\n.wrapper:focus-within .tooltip {\n  display: block;\n  opacity: 1;\n}\n\n/* ------------------------------------------------\n * Fallbacks de positionnement\n * ------------------------------------------------ */\n@position-try --ads-tooltip-top {\n  inset: auto;\n  bottom: anchor(top);\n  justify-self: anchor-center;\n  margin-bottom: var(--ads-tooltip-gap, 0.5rem);\n}\n\n@position-try --ads-tooltip-left {\n  inset: auto;\n  right: anchor(left);\n  align-self: anchor-center;\n  margin-right: var(--ads-tooltip-gap, 0.5rem);\n}\n\n@position-try --ads-tooltip-right {\n  inset: auto;\n  left: anchor(right);\n  align-self: anchor-center;\n  margin-left: var(--ads-tooltip-gap, 0.5rem);\n}\n",
      "type": "registry:file",
      "target": "src/components/valraiso/tooltip/tooltip.module.css"
    }
  ],
  "type": "registry:component"
}