u

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>