编辑指南：修订间差异

←上一编辑下一编辑→

可视化wikitext

2026年4月5日 (日) 16:06的版本

完整使用示例

1. 1. 简单提示

点击这里查看详情。

1. 2. 多行提示（用空格换行）

多行警告

1. 3. 带颜色的文字

- 红色重要 - 橙色注意 - 绿色完成 - 蓝色链接

1. 4. 加粗文字

- 重要术语**需要特别注意。

1. 5. 颜色+加粗

- 红色加粗警告**

1. 6. 特殊样式组合

 紫色大号加粗

1. 7. 带图片的提示（如果支持HTML）

<span data-tooltip="<img src='/uploads/example.jpg' style='max-width: 150px;'>
点击查看大图">

 查看图片

1. 8. 在表格中使用

| 状态 | 说明 | |------|------| | ✅ | 系统正常 | | ⚠️ | 需要注意 | | ❌ | 系统故障 |

1. 9. 代码中的提示

使用`HTML`构建网页。

1. 10. 列表中的提示

- **必填项** - 选填项 - 自动项

@@ 第1行： / 第1行： @@
-<p>
+# 完整使用示例
-  这是一段文字，其中包含一个
-  <span data-tooltip="这是简短的提示信息">简短提示</span>
-  和一个
-  <span data-tooltip="这是一个很长的提示信息，它会自动换行，因为我们设置了最大宽度800像素，最小宽度80像素">长提示</span>。
-</p>
-<a href="#" data-tooltip="这是一个链接的提示">悬停查看链接提示</a>
+## 1. 简单提示
+点击<span data-tooltip="这是一个简单的帮助提示">这里</span>查看详情。
-<button data-tooltip="按钮提示信息">按钮</button>
+## 2. 多行提示（用空格换行）
+<span data-tooltip="第一行：重要提示
+                    第二行：请注意操作
+                    第三行：后果自负">多行警告
+</span>
+## 3. 带颜色的文字
+- <span data-tooltip="重要事项" style="color: red;">红色重要</span>
+- <span data-tooltip="注意事项" style="color: orange;">橙色注意</span>
+- <span data-tooltip="完成状态" style="color: green;">绿色完成</span>
+- <span data-tooltip="链接说明" style="color: blue;">蓝色链接</span>
+## 4. 加粗文字
+**<span data-tooltip="加粗的提示内容">重要术语</span>**需要特别注意。
+## 5. 颜色+加粗
+**<span data-tooltip="非常重要" style="color: red;">红色加粗警告</span>**
+## 6. 特殊样式组合
+<span data-tooltip="特殊说明" style="color: purple; font-size: 16px; font-weight: bold;">
+  紫色大号加粗
+</span>
+## 7. 带图片的提示（如果支持HTML）
+<span data-tooltip="<img src='/uploads/example.jpg' style='max-width: 150px;'><br>点击查看大图">
+  查看图片
+</span>
+## 8. 在表格中使用
+| 状态 | 说明 |
+|------|------|
+| <span data-tooltip="正常运行" style="color: green;">✅</span> | 系统正常 |
+| <span data-tooltip="部分异常" style="color: orange;">⚠️</span> | 需要注意 |
+| <span data-tooltip="完全宕机" style="color: red;">❌</span> | 系统故障 |
+## 9. 代码中的提示
+使用`<span data-tooltip="超文本标记语言">HTML</span>`构建网页。
+## 10. 列表中的提示
+- **<span data-tooltip="用户必须完成此项" style="color: red;">必填项</span>**
+- <span data-tooltip="用户可选择是否填写" style="color: blue;">选填项</span>
+- <span data-tooltip="系统自动生成" style="color: gray;">自动项</span>