跳转到内容
打开/关闭菜单
  • 173 条目
  • 16 文件
  • 3 用户
  • 2838 编辑
Novark
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

编辑指南:修订间差异

来自Novark
wiki-js>Cyanidion
import from wiki.js: updated row=79 (content = post-action snapshot)
wiki-js>Cyanidion
import from wiki.js: updated row=80 (content = post-action snapshot)
第27行: 第27行:
</span>
</span>


## 1. 普通文本提示(使用原有方法,无需JavaScript)
将鼠标悬停在 <span data-tooltip="这是一个普通文本提示">这里</span> 查看效果。
## 2. 带图片的提示(需要添加类名)
## 2. 带图片的提示(需要添加类名)
将鼠标悬停在 <span class="html-tooltip" data-tooltip="<img src='/rootmedia/纺锤.png' style='max-width:150px; border-radius:4px;'><br>点击查看大图">这里</span> 查看图片。
将鼠标悬停在 <span class="html-tooltip" data-tooltip="<img src='/rootmedia/aaa.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:30的版本

  1. 完整使用示例!
    1. 1. 简单提示

点击这里查看详情。

    1. 2. 多行提示(用空格换行)

多行警告

    1. 3. 带颜色的文字

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

    1. 4. 加粗文字
    • 重要术语**需要特别注意。
    1. 5. 颜色+加粗
    • 红色加粗警告**
    1. 6. 特殊样式组合

 紫色大号加粗

    1. 2. 带图片的提示(需要添加类名)

将鼠标悬停在 <span class="html-tooltip" data-tooltip="<img src='/rootmedia/aaa.png' style='max-width:150px; border-radius:4px;'>
点击查看大图">这里 查看图片。

    1. 8. 列表中的提示

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