JavaScript Reference
描述 (Description)
Foundation为工具提示提供了JavaScript组件，如下所示。
初始化 (Initializing)
要使用此插件， foundation.core.js ， foundation.tooltip.js文件应包含在JavaScript中。 此插件需要以下实用程序库 -
foundation.util.box.js
foundation.util.triggers.js
Foundation.Tooltip
它创建了一个新的工具提示实例。
var elem = new Foundation.Tooltip(element);
它触发Tooltip#event:init events并接受以下参数。
| Sr.No. | 名称和描述 | 类型 |
|---|---|---|
| 1 | element 它是用于附加工具提示的jQuery对象。 | jQuery |
| 2 | options 要扩展默认配置，请使用此对象。 | Object |
插件选项 (Plugin 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 |
事件 (Events)
这些事件将通过附加工具提示插件的任何元素触发。 下表列出了具有简要说明的事件。
| Sr.No. | 名称和描述 |
|---|---|
| 1 | tooltip.zf.tooltips 触发以关闭页面上打开的所有其他工具提示。 |
| 2 | show.zf.tooltips 显示工具提示时触发。 |
| 3 | hide.zf.tooltips 隐藏工具提示时触发。 |
功能 (Functions)
.show
它显示工具提示并触发事件以关闭其他工具提示。 它触发Closeme#event:tooltip Tooltip#event:show events。
.hide
它隐藏了当前的工具提示，并在因碰撞而发生变化时重置定位类。 它会触发Tooltip#event:hide事件。
.toggle
除了静态show（）和hide（）函数之外， .toggle还添加了一个toggle方法。
.destroy
它会销毁工具提示实例，并从视图中删除模板元素。