跳至主要内容

文档

工具提示

轻松创建外观良好的工具提示。

用法

要应用此组件，请将 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>
属性 描述
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>

组件选项

任何这些选项都可以应用于组件属性。用分号分隔多个选项。了解更多

选项 值 默认值 描述
title 字符串 工具提示文本。
pos 字符串 top-center 工具提示位置。
offset 数字 false 工具提示偏移。
animation 字符串 uk-animation-scale-up 空格分隔的 动画 名称。逗号分隔以进行动画输出。
duration 数字 100 动画持续时间。
delay 数字 0 显示延迟。
cls 字符串 uk-active 活动类。
container 字符串 body 通过选择器定义目标容器，以指定工具提示应在 DOM 中的何处追加。

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

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

JavaScript

了解有关 JavaScript 组件 的更多信息。

初始化

UIkit.tooltip(element, options);

事件

以下事件将在元素上触发，这些元素由此组件注入

名称 描述
beforeshow 在项目显示之前触发。可以通过在事件上调用 preventDefault() 来阻止显示。
show 在项目显示后触发。
shown 在项目的显示动画完成之后触发。
beforehide 在项目隐藏之前触发。可以通过在事件上调用 preventDefault() 来阻止隐藏。
hide 在项目的隐藏动画开始之后触发。
hidden 在项目隐藏后触发。

示例

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

方法

以下方法可用于该组件

显示

UIkit.tooltip(element).show();

显示工具提示。

隐藏

UIkit.tooltip(element).hide();

隐藏工具提示。

无障碍性

工具提示组件遵守 工具提示小部件 WAI-ARIA 设计模式 并自动设置适当的 WAI-ARIA 角色、状态和属性。