跳到主要内容

文档

工具提示

轻松创建美观的工具提示。

用法

要应用此组件，请将 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 字符串 顶部居中 工具提示位置。
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 角色、状态和属性。