Foundation - Tooltip JavaScript 参考

描述

Foundation 提供了如下所示的 tooltip 的 JavaScript 组件。

要使用此插件，应在您的 JavaScript 中包含 foundation.core.js 和 foundation.tooltip.js 文件。此插件需要以下实用程序库：

它创建一个新的 tooltip 实例。

var elem = new Foundation.Tooltip(element);

它触发 Tooltip#event:init 事件并接受以下参数。

序号	名称和描述	类型
1	element 它是用于将 tooltip 附加到的 jQuery 对象。	jQuery
2	options 要扩展默认配置，使用此对象。	对象

序号

名称和描述

类型

element

它是用于将 tooltip 附加到的 jQuery 对象。

jQuery

options

要扩展默认配置，使用此对象。

对象

您可以使用这些选项来自定义 tooltip 实例。可以将其设置为单独的数据属性、一个合并的 data-options 属性或作为传递给插件构造函数的对象。下表列出了 Foundation 中使用的插件选项。

序号	名称和描述	示例
1	hoverDelay 它表示以毫秒为单位的时间，在悬停时 tooltip 必须打开之前需要等待的时间。	200
2	fadeInDuration150 它表示淡入视图所需的时间。	150
3	fadeOutDuration 它表示淡出视图所需的时间。	150
4	disableHover 设置为 true 时，它将禁用悬停事件打开 tooltip。	false
5	templateClasses 要应用于 tooltip 模板的其他类，可选。	'my-cool-tip-class'
6	tooltipClass 添加到 tooltip 模板的非可选类。	'tooltip'
7	triggerClass 应用于 tooltip 的锚元素的类。	'has-tip'
8	showOn 打开 tooltip 的断点最小尺寸。	'small'
9	template 用于创建 tooltip 标记的自定义模板。	''
10	tipText 打开时在 tooltip 模板中输出的文本。	'Some cool space fact here.'
11	clickOpen 通过单击或触摸事件触发时，它将打开 tooltip。	true
12	positionClass 用于定位的其他类，由 JS 设置。	'top'
13	vOffset 它表示模板在 Y 轴上必须从锚点推出的距离（像素）。	10
14	hOffset 当与旁边对齐时，它表示模板在 X 轴上必须从锚点推出的距离（像素）。	12

这些事件将从附加了 tooltip 插件的任何元素触发。下表列出了这些事件以及简要说明。

序号	名称和描述
1	tooltip.zf.tooltips 触发关闭页面上所有其他打开的 tooltip。
2	show.zf.tooltips tooltip 显示时触发。
3	hide.zf.tooltips tooltip 隐藏时触发。

序号

名称和描述

tooltip.zf.tooltips

触发关闭页面上所有其他打开的 tooltip。

show.zf.tooltips

tooltip 显示时触发。

hide.zf.tooltips

tooltip 隐藏时触发。

它显示 tooltip 并触发一个事件以关闭其他 tooltip。它触发 Closeme#event:tooltip Tooltip#event:show 事件。

它隐藏当前 tooltip 并在由于碰撞而发生更改时重置定位类。它触发 Tooltip#event:hide 事件。

除了静态的 show() 和 hide() 函数之外，.toggle 还添加了一个切换方法。

它销毁 tooltip 实例，并且模板元素将从视图中移除。

foundation_media.htm

打印页面