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

# 完整使用示例![纺锤.png](/rootmedia/纺锤.png)

## 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: 16px; font-weight: bold;">
  紫色大号加粗
</span>

## 1. 普通文本提示（使用原有方法，无需JavaScript）
将鼠标悬停在 <span data-tooltip="这是一个普通文本提示">这里</span> 查看效果。
## 2. 带图片的提示（需要添加类名）
将鼠标悬停在 <span class="html-tooltip" data-tooltip="<img src='/rootmedia/纺锤.png' style='max-width:150px; border-radius:4px;'><br>点击查看大图">这里</span> 查看图片。
## 3. 图文混合提示
<span class="html-tooltip" data-tooltip="<div style='text-align:center;'>
<img src='/rootmedia/siris.png' style='max-width:200px; border:2px solid #eee; border-radius:6px;'>
<p style='margin-top:8px; font-weight:bold;'>图片标题</p>
<p style='font-size:12px; color:#666;'>这是图片的描述文字，可以很长。</p>
</div>">查看图文详情</span>
## 4. 多图展示
<span class="html-tooltip" data-tooltip="<div style='display:flex; gap:10px;'>
<img src='/rootmedia/siris.png' style='width:100px; height:auto;'>
<img src='/rootmedia/siris.png' style='width:100px; height:auto;'>
</div>
<p style='margin-top:8px;'>两张示例图片</p>">查看多图</span>

## 8. 列表中的提示
- **<span data-tooltip="用户必须完成此项" style="color: red;">必填项</span>**
- <span data-tooltip="用户可选择是否填写" style="color: blue;">选填项</span>
- <span data-tooltip="系统自动生成" style="color: gray;">自动项</span>