编辑指南：修订间差异

2026年4月6日 (一) 07:57的版本

关于悬浮提示框注入

- 将以下代码注入页面-样式中： `[data-tooltip] {

 position: relative;
 cursor: help;
 display: inline;
 text-decoration: none

} [data-tooltip]::before {

 content: attr(data-tooltip);
 position: absolute;
 bottom: calc(100% + 10px);
 left: 50%;
 transform: translateX(-50%);
 min-width: 80px;
 max-width: 800px;
 width: max-content;
 white-space: pre-line;
 word-wrap: break-word;
 overflow-wrap: break-word;
 background: #fff;
 color: #333;
 border: 1px solid #e0e0e0;
 border-radius: 6px;
 padding: 10px 14px;
 font-size: 14px;
 line-height: 1.5;
 box-shadow: 0 2px 8px rgba(0,0,0,.1);
 opacity: 0;
 visibility: hidden;
 z-index: 1000;
 transition: all .2s ease

} [data-tooltip]::after {

 content: ;
 position: absolute;
 bottom: 100%;
 left: 50%;
 transform: translateX(-50%);
 border: 6px solid transparent;
 border-top-color: #fff;
 opacity: 0;
 visibility: hidden;
 transition: all .2s ease

} [data-tooltip]:hover::after, [data-tooltip]:hover::before {

 opacity: 1;
 visibility: visible

} @media (max-width:768px) {

 [data-tooltip]::before {
   max-width: 250px;
   left: 0;
   transform: translateX(0)
 }

} ` 1. 简单提示点击这里查看详情。 2. 多行提示多行警告 3. 带颜色的文字 - 红色重要 - 橙色注意 - 绿色完成 - 蓝色链接 4. 加粗文字

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

5. 颜色+加粗

- 红色加粗警告**

6. 特殊样式组合紫色大号加粗

@@ 第1行： / 第1行： @@
-# 完整使用示例!
+# 关于悬浮提示框注入
+- 将以下代码注入页面-样式中：
-## 1. 简单提示
-点击<span data-tooltip="这是一个简单的帮助提示">这里</span>查看详情。
-## 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: 24px; font-weight: bold;">
-  紫色大号加粗
-</span>
-## 7. 列表中的提示
-- **<span data-tooltip="用户必须完成此项" style="color: red;">必填项</span>**
-- <span data-tooltip="用户可选择是否填写" style="color: blue;">选填项</span>
-- <span data-tooltip="系统自动生成" style="color: gray;">自动项</span>
-# 我的页面
-## 主要内容
-这里是内容，包含几个特殊链接：
-这里是内容，包含几个特殊链接：
-. **重要链接**：<a href="/important" style="color: #d32f2f; font-weight: bold;">请点击查看</a>
-. **参考链接**：<a href="/reference" style="color: #1976d2; border-bottom: 1px dotted;">更多信息</a>
-. **下载链接**：<a href="/download" style="background: #4caf50; color: white; padding: 4px 8px; border-radius: 3px; text-decoration: none;">⬇ 下载文件</a>
 `[data-tooltip] {
    position: relative;
@@ 第96行： / 第57行： @@
 }
 `
+. 简单提示
+点击<span data-tooltip="这是一个简单的帮助提示">这里</span>查看详情。
+. 多行提示
+<span data-tooltip="第一行：重要提示
+                    第二行：请注意操作
+                    第三行：后果自负">多行警告
+</span>
+. 带颜色的文字
+- <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>
+. 加粗文字
+**<span data-tooltip="加粗的提示内容">重要术语</span>**需要特别注意。
+. 颜色+加粗
+**<span data-tooltip="非常重要" style="color: red;">红色加粗警告</span>**
+. 特殊样式组合
+<span data-tooltip="特殊说明" style="color: purple; font-size: 16px; font-weight: bold;">紫色大号加粗
+</span>