编辑指南：修订间差异
来自Novark
更多操作
wiki-js>Cyanidion import from wiki.js: updated row=77 (content = post-action snapshot) |
wiki-js>Cyanidion import from wiki.js: updated row=78 (content = post-action snapshot) |
||
| 第1行： | 第1行： | ||
 | ||
## 1. 简单提示 | ## 1. 简单提示 | ||
| 第27行： | 第27行： | ||
</span> | </span> | ||
## | ## 1. 普通文本提示（使用原有方法，无需JavaScript） | ||
<span data-tooltip="<img src='/rootmedia/ | 将鼠标悬停在 <span data-tooltip="这是一个普通文本提示">这里</span> 查看效果。 | ||
## 2. 带图片的提示（需要添加类名） | |||
</span> | 将鼠标悬停在 <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. 列表中的提示 | ## 8. 列表中的提示 | ||
2026年4月5日 (日) 16:25的版本
- 完整使用示例
- 1. 简单提示
点击这里查看详情。
- 2. 多行提示（用空格换行）
多行警告
- 3. 带颜色的文字
- 红色重要 - 橙色注意 - 绿色完成 - 蓝色链接
- 4. 加粗文字
- 重要术语**需要特别注意。
- 5. 颜色+加粗
- 红色加粗警告**
- 6. 特殊样式组合
紫色大号加粗
- 1. 普通文本提示（使用原有方法，无需JavaScript）
将鼠标悬停在 这里 查看效果。
- 2. 带图片的提示（需要添加类名）
将鼠标悬停在 <span class="html-tooltip" data-tooltip="<img src='/rootmedia/纺锤.png' style='max-width:150px; border-radius:4px;'>
点击查看大图">这里 查看图片。
- 3. 图文混合提示
<span class="html-tooltip" data-tooltip="
<img src='/rootmedia/siris.png' style='max-width:200px; border:2px solid #eee; border-radius:6px;'>
图片标题
这是图片的描述文字，可以很长。
">查看图文详情
- 4. 多图展示
<span class="html-tooltip" data-tooltip="
<img src='/rootmedia/siris.png' style='width:100px; height:auto;'> <img src='/rootmedia/siris.png' style='width:100px; height:auto;'>
两张示例图片
">查看多图
- 8. 列表中的提示
- **必填项** - 选填项 - 自动项