查看“︁编辑指南”︁的源代码

# 完整使用示例!

## 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>

# 我的页面
## 主要内容
这里是内容，包含几个特殊链接：
这里是内容，包含几个特殊链接：
1. **重要链接**：<a href="/important" style="color: #d32f2f; font-weight: bold;">请点击查看</a>
2. **参考链接**：<a href="/reference" style="color: #1976d2; border-bottom: 1px dotted;">更多信息</a>
3. **下载链接**：<a href="/download" style="background: #4caf50; color: white; padding: 4px 8px; border-radius: 3px; text-decoration: none;">⬇ 下载文件</a>

`[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)
  }
}
`