UIkit3.x文档

工具提示

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

用法

要应用此组件,请将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 活动状态

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

<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.