小工具/Bili-tips

MediaWiki:Testtoc.js

主要用途

在BWIKI页面编写过程中用到的弹窗提示功能，鼠标移入或者点击后弹出提示框内容。

安装方法

推荐马老师的云小工具，可直接点绿使用。

使用方法

模仿烟雨江湖:Tooltip，类似的使用方法。 例如（点绿云小工具bili-tips可在本页查看效果）：

---

弹框文本：顶部弹框

<span class="bili-tips" data-type="" data-placement="top" data-name="一艘小船 [[文件:图标-船.png]]">弹框文本：顶部弹框</span>

---

弹框加载模板：右侧淡入淡出

<span class="bili-tips" data-type="@模板名称" data-animation="fade" data-placement="right" data-name="参数">弹框加载模板：右侧淡入淡出</span>

---

弹框加载模板：跟随鼠标

<span class="bili-tips" data-type="@模板名称" data-name="参数" data-follow="1">弹框加载模板：跟随鼠标</span>

---

弹框加载模块：点击切换

<span class="bili-tips" data-type="$模块名称" data-trigger="click" data-name="参数">弹框加载模块：点击切换</span>

---

自定义参数：

属性名	说明	可选值	默认值
data-trigger	触发方式	click/focusin/mouseenter click/mouseenter focus	mouseenter focus
data-duration	动画时间	[显示持续毫秒,隐藏持续毫秒]	[300,250]
data-placement	弹框位置	top/top-start/top-end right/right-start/right-end bottom/bottom-start/bottom-end left/left-start/left-end auto/auto-start/auto-end	bottom
data-animation	动画效果	fade/scale/shift-away/shift-toward	scale
data-follow	跟随鼠标	true/false	false
data-container	代码位置	parent/body	body

同类区别

1. 烟雨江湖:Tooltip：有缓存，不依赖jQuery，适配手机端（手机端全屏弹模态框和跳转按钮），基本不会出现加载失败的情况。无法（不方便）复制弹框内文字等内容，使用正则强制修改触发内容被<a>标签包起来，在一些奇奇怪怪的使用需求中，会造成奇奇怪怪的错位。
2. 动态加载：相比烟雨江湖Tooltip有更丰富的自定义参数，支持切换标签，支持根据滚动位置动态加载。有几率加载失败导致不弹框。（写完才看到宁佬的这个动态加载，不然就可以偷懒直接抄了。😭）
3. 本工具：更多几个自定义参数，有几率加载失败导致不弹框。与烟雨江湖Tooltip相同的使用方法。

• 以上弹框工具可以同时使用，但不推荐。因我主要用于弹模板，所以在CSS中移除了自带的背景色、箭头等样式（见：MediaWiki:Gadget-Bili-tips.css），需要注意如果在同时使用动态加载等依赖tippy.js的小工具情况下，会导致CSS样式冲突。

已知缺陷

1. 因依赖自带的tippy.js库，BWIKI触发JS加载问题时（瞎猜的，我不会排查此类问题），会提示"tippy is not defined"，导致弹框失效。（已解决）
2. 在编辑预览时，有概率触发无法弹框。在能触发弹框时，又有概率无法加载CSS样式。怀疑也是JS加载问题（同样瞎猜的）。（已解决）
3. 似乎无法触发多级（模板套娃）弹框，最早用烟雨江湖tooltip魔改加载外部js库时是可以的，后来使用了WIKI自带未知版本的js库以及移除了大部分重复生成弹框代码后就不行了。（已解决）