工具提示（Tooltip） - UIkit3中文文档

轻松创建漂亮的工具提示。

用法

要应用此组件，请将uk-tooltip属性添加到元素。并将title: TEXT选项添加到这个属性，选项的值为工具提示的文本内容。

<div uk-tooltip="title: Hello World"></div>

如果title是属性值中的唯一选项，那么还可以直接使用uk-tooltip="TEXT"

<div uk-tooltip="Hello World"></div>

<button class="uk-button uk-button-default" uk-tooltip="Hello World">Hover</button>

对齐

将以下选项之一添加到uk-tooltip属性以调整工具提示的对齐方式。

<button uk-tooltip="title: Hello World; pos: top-left"></button>

Attribute	Description
`pos: top`	将工具提示与顶部对齐。
`pos: top-left`	将工具提示与左上方对齐。
`pos: top-right`	将工具提示与右上方对齐。
`pos: bottom`	将工具提示与底部对齐。
`pos: bottom-left`	将工具提示与左下方对齐。
`pos: bottom-right`	将工具提示与右下方对齐。
`pos: left`	将工具提示向左对齐。
`pos: right`	将工具提示向右对齐。

<p uk-margin>
    <button class="uk-button uk-button-default" uk-tooltip="Hello World">Top</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: top-left">Top Left</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: top-right">Top Right</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: bottom">Bottom</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: bottom-left">Bottom Left</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: bottom-right">Bottom Right</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: left">Left</button>
    <button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: right">Right</button>
</p>

延迟

如果希望工具提示带一点延迟，只需将delay选项添加到uk-tooltip属性中，值以毫秒为单位。

<div uk-tooltip="title: Hello World; delay: 500"></div>

<button class="uk-button uk-button-default" uk-tooltip="title: Hello World; delay: 500">Hover</button>

组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。了解更多

Option	Value	Default	Description
`title`	String	``	工具提示文字。
`pos`	String	`top`	工具提示位置。
`offset`	Number	`false`	工具提示偏移量。
`animation`	String	`uk-animation-scale-up`	用空格分隔要使用的动画名称。出场动画用逗号隔开。
`duration`	Number	`100`	动画持续时间
`delay`	Number	`0`	显示工具提示的延迟时间
`cls`	String	`uk-active`	活动状态

title 是 Primary选项，如果它是属性值中的唯一选项，则可以省略其键。

<span uk-tooltip="Hello World"></span>

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.tooltip(element, options);

Events

The following events will be triggered on elements, which are injected by this component:

Name	Description
`beforeshow`	Fires before an item is shown. Can prevent showing by calling `preventDefault()` on the event.
`show`	Fires after an item is shown.
`shown`	Fires after the item's show animation has completed.
`beforehide`	Fires before an item is hidden. Can prevent hiding by calling `preventDefault()` on the event.
`hide`	Fires after an item's hide animation has started.
`hidden`	Fires after an item is hidden.

Example

UIkit.util.on(document, 'show', '.uk-tooltip.uk-active', function() {
  // do something
});

Methods

The following methods are available for the component:

Show

UIkit.tooltip(element).show();

Shows the Tooltip.

Hide

UIkit.tooltip(element).hide();

Hides the Tooltip.

UIkit3.x文档