工具提示

JavaScript

工具提示？更像是酷提示。但实际上，工具提示对于显示页面上术语或操作的扩展信息非常有用。

默认情况下，工具提示会悬停在定义的术语下方。

The <span data-tooltip tabindex="1" title="Fancy word for a beetle.">scarabaeus</span> hung quite
clear of any branches, and, if allowed to fall, would have fallen at our feet.

圣甲虫悬挂在任何树枝上，如果允许掉落，它会落在我们的脚边。

要获得一个顶级的顶部工具提示（哈哈），只需将 .top 类添加到 <span> 元素中。

在视频中观看此部分

The <span data-tooltip class="top" tabindex="2" title="Fancy word for a beetle.">scarabaeus</span>
hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet.

圣甲虫悬挂在任何树枝上，如果允许掉落，它会落在我们的脚边。

默认情况下，单击工具提示会使其保持打开状态，直到您单击其他位置。但是，您可以通过添加 data-click-open="false" 来禁用该功能

在视频中观看此部分

this
<span data-tooltip class="top" tabindex="2" title="You see?  I'm open!">
  tooltip will stay open
</span>
while
<span data-tooltip class="top" data-click-open="false" tabindex="2" title="I don't stay open">
  this one will only be open when hovered
</span>

这个工具提示会保持打开状态而这个工具提示只会在悬停时打开

您还可以通过将 .right 或 .left 类添加到 <span> 元素来将工具提示定位到单词的右侧和左侧。

在视频中观看此部分

在从右到左模式下使用 Foundation 时，“右”仍然表示右，“左”仍然表示左。

When he was dressed he went down the hall into the
<span data-tooltip class="right" tabindex="3" title="Aligned on the right">kitchen</span>.
The table was almost hidden beneath all Dudley's birthday presents. It looked as though
<span data-tooltip class="left" tabindex="4" title="Aligned on the left">Dudley</span>
had gotten the new computer he wanted, not to mention the second television and the racing bike.

他穿好衣服后，走过大厅，走进厨房。桌子几乎被达德利的所有生日礼物掩盖了。看起来达德利得到了他想要的新电脑，更不用说第二台电视和赛车了。

显式定位

v6.4 中的新功能： 注意！此显式定位模型是 v6.4 中的新功能。

现在，您可以使用工具提示定义提示的两个位置。这些工具提示具有完全显式的定位模型，您可以通过该模型使用 data-position 和 data-alignment 来定义框的两个位置。

这些下拉列表设置了各种定位和对齐方式。有效位置为左/右/上/下。有效的对齐方式为左/右/上/下/居中。左对齐表示左侧应对齐。右对齐表示右侧应对齐。居中对齐表示中心应对齐。

顶部和底部定位

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="left">
  Bottom Left
</button>

<button class="button" type="button"  data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="center">
  Bottom Center
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="bottom" data-alignment="right">
  Bottom Right
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="left">
  Top Left
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="center">
  Top Center
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="top" data-alignment="right">
  Top Right
</button>

左侧和右侧定位

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="top">
  Right Top
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="top">
  Left Top
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="center">
  Right Center
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="center">
  Left Center
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="right" data-alignment="bottom">
  Right Bottom
</button>

<button class="button" type="button" data-tooltip tabindex="1" title="Fancy word for a beetle." data-position="left" data-alignment="bottom">
  Left Bottom
</button>

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$has-tip-cursor`	关键字	`help`	定义术语的默认光标。
`$has-tip-font-weight`	关键字或数字	`$global-weight-bold`	定义术语的默认字体粗细。
`$has-tip-border-bottom`	列表	`dotted 1px $dark-gray`	定义术语的默认底部边框。
`$tooltip-background-color`	颜色	`$black`	工具提示背景的默认颜色。
`$tooltip-color`	颜色	`$white`	工具提示字体的默认颜色。
`$tooltip-padding`	数字	`0.75rem`	工具提示背景的默认填充。
`$tooltip-max-width`	数字	`10rem`	工具提示的默认最大宽度。
`$tooltip-font-size`	数字	`$small-font-size`	工具提示文本的默认字体大小。默认情况下，我们建议使用比正文副本小的字体大小。
`$tooltip-pip-width`	数字	`0.75rem`	工具提示的默认尖角宽度。
`$tooltip-pip-height`	数字	`$tooltip-pip-width * 0.866`	工具提示的默认尖角高度。这有助于计算工具提示与其对应词语之间的距离。
`$tooltip-radius`	数字	`$global-radius`	工具提示的默认半径。

JavaScript 参考

初始化

您的 JavaScript 中必须包含以下文件才能使用此插件

foundation.core.js
foundation.tooltip.js
- 使用实用程序库 foundation.util.box.js
- 使用实用程序库 foundation.util.mediaQuery.js
- 使用实用程序库 foundation.util.triggers.js

Foundation.Tooltip

创建工具提示的新实例。

var elem = new Foundation.Tooltip(element, options);

触发以下事件： Tooltip#event:init

名称	类型	描述
`元素`	jQuery	用于附加工具提示的 jQuery 对象。
`选项`	对象	用于扩展默认配置的对象。

插件选项

使用这些选项可以自定义工具提示的实例。插件选项可以设置为单个数据属性、一个组合的 data-options 属性，或者作为传递给插件构造函数的对象。详细了解如何初始化 JavaScript 插件。

名称	类型	默认值	描述
`data-hover-delay`	`数字`	`200`	悬停时工具提示打开前的时间（以毫秒为单位）。
`data-fade-in-duration`	`数字`	`150`	工具提示淡入视图所需的时间（以毫秒为单位）。
`data-fade-out-duration`	`数字`	`150`	工具提示淡出视图所需的时间（以毫秒为单位）。
`data-disable-hover`	`布尔值`	`false`	如果设置为 true，则禁用悬停事件打开工具提示
`data-disable-for-touch`	`布尔值`	`false`	禁用触摸设备的工具提示。这对于使带有工具提示的元素在第一次点击时触发其操作而不是显示工具提示非常有用。
`data-template-classes`	`字符串`	`''`	在初始化时应用于工具提示模板的可选附加类。
`data-tooltip-class`	`字符串`	`工具提示`	添加到工具提示模板的非可选类。Foundation 默认值为“工具提示”。
`data-trigger-class`	`字符串`	`has-tip`	应用于工具提示锚点元素的类。
`data-show-on`	`字符串`	`small`	打开工具提示的最小断点大小。
`data-template`	`字符串`	`''`	用于生成工具提示标记的自定义模板。
`data-tip-text`	`字符串`	`''`	打开时显示在工具提示模板中的文本。
`data-click-open`	`布尔值`	`true`	允许工具提示在通过单击或触摸事件触发时保持打开状态。
`data-position`	`字符串`	`auto`	工具提示的位置。可以是左、右、下、上或自动。
`data-alignment`	`字符串`	`auto`	工具提示相对于锚点的对齐方式。可以是左、右、下、上、居中或自动。
`data-allow-overlap`	`布尔值`	`false`	允许容器/窗口重叠。如果为 false，工具提示将首先尝试按照 data-position 和 data-alignment 的定义进行定位，但如果会导致溢出，则会重新定位。@option
`data-allow-bottom-overlap`	`布尔值`	`false`	仅允许容器底部重叠。这是下拉列表最常见的行为，允许下拉列表扩展屏幕底部，但不会以其他方式影响或突破容器。对于工具提示不太常见。
`data-v-offset`	`数字`	`0`	模板在 Y 轴上推离锚点的距离（以像素为单位）。
`data-h-offset`	`数字`	`0`	模板在 X 轴上推离锚点的距离（以像素为单位）
`data-tooltip-height`	`数字`	`14`	模板间距自动调整垂直工具提示的距离（以像素为单位）
`data-tooltip-width`	`数字`	`12`	模板间距自动调整水平工具提示的距离（以像素为单位）
`data-allow-html`	`布尔值`	`false`	允许工具提示中使用 HTML。警告：如果您要将用户生成的内容加载到工具提示中，则允许使用 HTML 可能会使您遭受 XSS 攻击。

事件

这些事件将从任何附加了工具提示插件的元素触发。

名称	描述
`tooltip.zf.closeme`	触发以关闭页面上所有其他打开的工具提示
`show.zf.tooltip`	显示工具提示时触发
`hide.zf.tooltip`	隐藏工具提示时触发

方法

显示

$('#element').foundation('show');

显示工具提示，并触发一个事件以关闭页面上任何其他打开的工具提示

触发以下事件： Tooltip#event:closeme Tooltip#event:show

隐藏

$('#element').foundation('hide');

隐藏当前工具提示，并重置由于冲突而更改的定位类

触发以下事件： Tooltip#event:hide

切换

$('#element').foundation('toggle');

除了静态 show() 和 hide() 函数外，还添加了一个 toggle 方法

_destroy

$('#element').foundation('_destroy');

销毁一个工具提示实例，从视图中删除模板元素。

工具提示

基本工具提示

顶部工具提示

单击工具提示

工具提示右侧和左侧

显式定位

顶部和底部定位

左侧和右侧定位

Sass 参考

变量

JavaScript 参考

初始化

Foundation.Tooltip

插件选项

事件

方法

显示

隐藏

切换

_destroy