u

code/g3soft-libs/docs/examples/tooltip/basic.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+// 最基础：content 传文本，默认在触发器上方
+import { G3Button, G3Tooltip } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Tooltip content="这是一条简短说明">
+    <G3Button type="outline">悬停查看提示</G3Button>
+  </G3Tooltip>
+</template>

code/g3soft-libs/docs/examples/tooltip/disabled.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// 受控与禁用：disabled 时不响应 hover；也可以用 open 手动控制
+import { ref } from 'vue'
+import { G3Button, G3Space, G3Switch, G3Tooltip } from '@g3soft/ui'
+
+const enabled = ref(true)
+const open = ref(false)
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="16" style="display: flex">
+    <G3Space :size="8" align="center">
+      <G3Switch v-model="enabled">启用提示</G3Switch>
+      <G3Tooltip :disabled="!enabled" content="现在可以看到了">
+        <G3Button type="outline">悬停试试</G3Button>
+      </G3Tooltip>
+    </G3Space>
+
+    <G3Space :size="8" align="center">
+      <G3Switch v-model="open">受控显示</G3Switch>
+      <G3Tooltip :open="open" content="由 open 控制，不受 hover 影响">
+        <G3Button type="outline">受控提示</G3Button>
+      </G3Tooltip>
+    </G3Space>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/tooltip/placement.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// placement：提示方位；贴边时自动翻转，不会被裁掉
+import { G3Button, G3Tooltip } from '@g3soft/ui'
+
+const placements = ['top', 'right', 'bottom', 'left'] as const
+</script>
+
+<template>
+  <div style="display: flex; gap: 16px; padding: 60px 20px; justify-content: center">
+    <G3Tooltip v-for="placement in placements" :key="placement" :placement="placement" :content="placement">
+      <G3Button type="outline">{{ placement }}</G3Button>
+    </G3Tooltip>
+  </div>
+</template>

code/g3soft-libs/docs/examples/tooltip/rich.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+// #content 插槽：放富内容（多行说明、快捷键、链接）
+import { G3Button, G3Tooltip } from '@g3soft/ui'
+</script>
+
+<template>
+  <G3Tooltip placement="bottom">
+    <G3Button type="ghost">富内容提示</G3Button>
+
+    <template #content>
+      <div style="max-width: 240px; line-height: 1.6">
+        <strong style="display: block; margin-bottom: 4px">发布到生产环境</strong>
+        <span style="color: #6b7280">
+          会触发全量构建与灰度发布，平均耗时 3 分钟。快捷键
+          <kbd>⌘ + Shift + P</kbd>
+        </span>
+      </div>
+    </template>
+  </G3Tooltip>
+</template>