{
 "slug": "tooltip",
 "curated": true,
 "mode": "scenarios",
 "examples": [
  {
   "id": "tooltip-ex-1",
   "title": "默认与常用变体",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-tooltip\">\n    <div class=\"kole-tooltip-tooltip-wrap\">\n      <button class=\"kole-tooltip-button kole-tooltip-primary\" type=\"button\" aria-describedby=\"kole-tooltip-tip\" data-tip>悬停或聚焦</button>\n      <span class=\"kole-tooltip-tip\" id=\"kole-tooltip-tip\" role=\"tooltip\" hidden>这是补充说明</span>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-tooltip\">\n  <div class=\"kole-tooltip-tooltip-wrap\">\n    <button class=\"kole-tooltip-button kole-tooltip-primary\" type=\"button\" aria-describedby=\"kole-tooltip-tip\">悬停或聚焦</button>\n    <span class=\"kole-tooltip-tip\" role=\"tooltip\" hidden>这是补充说明</span>\n  </div>\n</div>",
    "jsx": "import { KoleTooltip } from 'kole-ui/react';\n\n<KoleTooltip tooltip=\"这是补充说明\" placement=\"top\" trigger=\"hover\" />",
    "vue3": "<template>\n  <KoleTooltip tooltip=\"这是补充说明\" placement=\"top\" trigger=\"hover\" />\n</template>\n\n<script setup>\nimport { KoleTooltip } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <KoleTooltip tooltip=\"这是补充说明\" placement=\"top\" trigger=\"hover\" />\n</template>\n\n<script>\nimport { KoleTooltip } from 'kole-ui/vue2';\nexport default { components: { KoleTooltip } };\n</script>",
    "tsx": "import { KoleTooltip } from 'kole-ui/react';\n\nexport default function KoleTooltipDemo(): JSX.Element {\n  return (\n    <KoleTooltip tooltip=\"这是补充说明\" placement=\"top\" trigger=\"hover\" />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleTooltip tooltip=\"这是补充说明\" placement=\"top\" trigger=\"hover\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTooltip } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('默认与常用变体');\n\n</script>",
    "vue2ts": "<template>\n\n  <KoleTooltip tooltip=\"这是补充说明\" placement=\"top\" trigger=\"hover\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTooltip } from 'kole-ui/vue2';\n\nexport default { components: { KoleTooltip },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Tooltip.html 第一个 .demo-block 与页尾内联脚本（mouseenter / mouseleave / focus / blur 切换 tip 的 hidden）：触发方式即 trigger=\"hover\"，气泡文本「这是补充说明」为 span[role=tooltip] 的真实内容。",
    "placement=\"top\" 与 trigger=\"hover\" 的合法取值见 site/details/tooltip.json 的 contract.dims（placement: top|right|bottom，trigger: hover|click）；prop 名见 frameworks/Tooltip.jsx 第 4 行参数表。"
   ]
  },
  {
   "id": "tooltip-ex-2",
   "title": "状态与使用场景",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-tooltip\">\n    <div class=\"kole-tooltip-surface\" style=\"padding:12px\">解释图标、截断内容或术语，适合短文本的 hover、focus 和键盘提示。</div>\n    <span class=\"kole-tooltip-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n  </div>\n  <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-tooltip\">\n  <div class=\"kole-tooltip-surface\" style=\"padding:12px\">解释图标、截断内容或术语，适合短文本的 hover、focus 和键盘提示。</div>\n  <span class=\"kole-tooltip-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
    "jsx": "import { KoleTooltip } from 'kole-ui/react';\n\n// 术语/规则解释：点击触发，气泡出现在文案右侧\n<KoleTooltip tooltip=\"订单将在审核通过后 24 小时内出库\" placement=\"right\" trigger=\"click\" />",
    "vue3": "<template>\n  <KoleTooltip\n    tooltip=\"订单将在审核通过后 24 小时内出库\"\n    placement=\"right\"\n    trigger=\"click\"\n  />\n</template>\n\n<script setup>\nimport { KoleTooltip } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <KoleTooltip\n    tooltip=\"订单将在审核通过后 24 小时内出库\"\n    placement=\"right\"\n    trigger=\"click\"\n  />\n</template>\n\n<script>\nimport { KoleTooltip } from 'kole-ui/vue2';\nexport default { components: { KoleTooltip } };\n</script>",
    "tsx": "import { KoleTooltip } from 'kole-ui/react';\n\nexport default function KoleTooltipDemo(): JSX.Element {\n  // 术语/规则解释：点击触发，气泡出现在文案右侧\n  return (\n    <KoleTooltip tooltip=\"订单将在审核通过后 24 小时内出库\" placement=\"right\" trigger=\"click\" />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleTooltip\n    tooltip=\"订单将在审核通过后 24 小时内出库\"\n    placement=\"right\"\n    trigger=\"click\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTooltip } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('状态与使用场景');\n\n</script>",
    "vue2ts": "<template>\n\n  <KoleTooltip\n    tooltip=\"订单将在审核通过后 24 小时内出库\"\n    placement=\"right\"\n    trigger=\"click\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTooltip } from 'kole-ui/vue2';\n\nexport default { components: { KoleTooltip },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Tooltip.html 第二个 .demo-block 的场景文案（解释图标、截断内容或术语），配合 site/details/tooltip.json contract.dims 中 placement 的 right 档与 trigger 的 click 档，给出与示例 1（top + hover）不同的同族取值。",
    "tooltip / placement / trigger 三个 prop 名可在 frameworks/Tooltip.vue3.vue 第 7-11 行与 frameworks/Tooltip.vue2.vue 第 8-11 行 defineProps / props 表中逐项溯源。"
   ]
  }
 ]
}