用户:141211391

扩展应用

1. 核心功能概述

此弹窗功能由 tippy.js 库实现，结合 Semantic MediaWiki 扩展，允许为页面元素创建交互式弹窗。弹窗的外观、行为和内容可以通过 HTML 属性和 JavaScript 参数进行控制。

2. 核心 HTML 结构

基本的 HTML 触发结构如下：

<span class="smw-highlighter" 
		data-state="persistent" 
		data-title="弹窗标题" 
		data-content="弹窗内容">
	<span class="smwtticon info"></span>
	<span class="smwttcontent">备用弹窗内容</span>
</span>

基本的 HTML 弹窗结构如下：

<div class="tippy-popper">
	<div class="tippy-tooltip light-border-theme">
		<div class="tippy-arrow"></div>
		<div class="tippy-content">
			<div class="tippy-header"><span class="tippy-cancel"></span>弹窗标题</div>
			<div class="tippy-content-container">弹窗内容</div>
		</div>
	</div>
</div>

3. 参数说明与可选值

(1) class="smw-highlighter"

触发弹窗的必要类，弹窗将绑定到该元素上。

可通过 data-tooltipclass 或 CSS 修改弹窗样式。

(2) data-title

设置弹窗的标题文本。

空字符串（data-title=""）会尝试通过 data-type 获取默认标题，如果没有设置 data-type，默认标题为信息。

注：不同于使用{{#info:}}会根据 data-type 自动生成标题，直接使用html生成弹窗，会显示为⧼smw-ui-tooltip-title-⧼data-type⧽⧽，所以建议不设置 data-type 。

(3) data-content

设置弹窗内容。

不设置 data-content 参数，会尝试使用嵌套的.smwttcontent元素作为内容。

空字符串（data-content=""），则会显示默认错误内容：Missing a content object。

(4) data-type

设置弹窗的类型，通常决定默认标题和样式。

注：该参数为使用{{#info:}}自动生成，手动写并无作用，可能会导致其他参数失效，不建议使用该参数。

可选值：

4：警告（warning）。

5：错误（error）。

6：信息（info）。

8：注释（note）。

(5) data-state

设置弹窗的行为状态，比如控制弹窗是否为持久化。

可选值：

persistent：持久化弹窗，仅通过点击关闭按钮关闭。

inline（或未设置）：非持久化，鼠标不在弹窗触发范围或点击弹窗外部关闭。

(6) data-bottom

设置弹窗的底部内容，会在<div class="tippy-content-container"></div>后添加<div class="tippy-bottom"></div>，内容为 data-bottom。

(7) data-maxwidth

设置弹窗的最大宽度

(8) data-tooltipclass

设置弹窗的附加 CSS 类名，为弹窗添加自定义样式，该class会添加到<div class="tippy-tooltip"></div>中。

可选值：

light-border-theme（默认样式）

square-border-light

其它任意合法的 CSS 类名。

(9) data-theme

设置弹窗内容的附加 CSS 类名，为弹窗内容添加自定义样式，该class会分别添加到<div class="tippy-header"></div><div class="tippy-content-container"></div><div class="tippy-bottom"></div>中。

(10) 弹窗触发图标：<span class="smwtticon info"></span>

可选值：

info：

question：

service：

warning：

error：

note：

可使用文字作为弹窗触发：

<span class="smw-highlighter" data-state="persistent" data-title="弹窗标题" data-content="弹窗内容">显示文字</span>

→ 显示文字

(11) 嵌套内容：<span class="smwttcontent"></span>

备用内容，如果 data-content 未设置，则弹窗会使用该元素的 HTML 内容作为正文。

4. 使用示例

基本用法

<span class="smw-highlighter" data-title="示例标题" data-content="这是内容">鼠标悬停查看内容</span> → 鼠标悬停查看内容

使用备用内容

<span class="smw-highlighter">鼠标悬停查看内容<span class="smwttcontent">备用弹窗内容</span></span> → 鼠标悬停查看内容备用弹窗内容

自定义样式和行为

<span class="smw-highlighter" data-state="persistent" data-tooltipclass="custom-tooltip" data-title="自定义弹窗标题" data-content="自定义弹窗内容">鼠标悬停打开内容</span><bstyle>.custom-tooltip *{color: red;}</bstyle>

→ 鼠标悬停打开内容