Foundation - Tooltip JavaScript 参考
描述
Foundation 为工具提示提供 JavaScript 组件，如下所示。
初始化
要使用此插件，您的 JavaScript 中应包含 foundation.core.js、foundation.tooltip.js 文件。此插件需要以下实用程序库 −
foundation.util.box.js
foundation.util.triggers.js
Foundation.Tooltip
它会创建一个新的工具提示实例。
var elem = new Foundation.Tooltip(element);
它触发 Tooltip#event:init 事件并接受以下参数。
| Sr.No. | 名称 &描述 | 类型 |
|---|---|---|
| 1 |
Element 它是用于附加工具提示的 jQuery 对象。 |
jQuery |
| 2 |
Options 要扩展默认配置，使用此对象。 |
对象 |
插件选项
您可以使用它们来自定义工具提示的实例。它可以设置为单独的数据属性、一个合并的 data-options 属性或作为传递给插件构造函数的对象。下表列出了 Foundation 中使用的插件选项。
| Sr.No. | 名称和描述 | 示例 |
|---|---|---|
| 1 |
hoverDelay 它表示在悬停时工具提示必须打开之前所花的时间(以毫秒为单位)。 |
200 |
| 2 |
fadeInDuration150 它表示淡入视图的时间。 |
150 |
| 3 |
fadeOutDuration 它表示淡入视图的时间超出视野范围。 |
150 |
| 4 |
disableHover 设置为 true 时，将禁用悬停事件打开工具提示。 |
false |
| 5 |
templateClasses 应用于工具提示模板的其他类，这是可选的。 |
'my-cool-tip-class' |
| 6 |
tooltipClass 已将非可选类添加到工具提示的模板中。 |
'tooltip' |
| 7 |
triggerClass 应用于工具提示的锚元素的类。 |
'has-tip' |
| 8 |
showOn 打开工具提示的断点的最小大小。 |
'small' |
| 9 |
template 用于创建工具提示标记的自定义模板。 |
'' |
| 10 |
tipText 打开时在工具提示模板中输出的文本。 |
'这里有一些很酷的空间事实。' |
| 11 |
clickOpen 通过点击或触摸事件触发时打开工具提示。 |
true |
| 12 |
positionClass 用于定位的附加类，由 JS 设置。 |
'top' |
| 13 |
vOffset 它表示模板必须从 Y 轴上的锚点推动的距离(像素)。 |
10 |
| 14 |
hOffset 它表示模板与侧面对齐时必须从 X 轴上的锚点推动的距离(像素)。 |
12 |
事件
这些事件将从附加了工具提示插件的任何元素触发。下表列出了事件并附有简要说明。
| Sr.No. | 名称和描述 |
|---|---|
| 1 |
tooltip.zf.tooltips 触发以关闭页面上打开的所有其他工具提示。 |
| 2 |
show.zf.tooltips 显示工具提示时触发。 |
| 3 |
hide.zf.tooltips 显示工具提示时触发隐藏。 |
函数
.show
显示工具提示并触发事件以关闭其他工具提示。它会触发 Closeme#event:tooltip Tooltip#event:show 事件。
.hide
隐藏当前工具提示，并在因碰撞而改变时重置定位类。它会触发 Tooltip#event:hide 事件。
.toggle
除了静态 show() 和 hide() 函数之外，.toggle 还添加了一个 toggle 方法。
.destroy
销毁工具提示实例并从视图中删除模板元素。
foundation_media.html
