跳到主要内容

文档

Tooltip

轻松创建一个外观漂亮的工具提示。

用法

要应用该组件，为元素添加 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>

注意 工具提示的内容会作为 HTML 渲染。做清理过滤是开发者自己的责任。

对齐

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

延迟

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

<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 String 工具提示的文本。
pos String top-center 工具提示的位置。
offset Number false 工具提示的偏移量。
animation String uk-animation-scale-up 用于动画的动画名称，多个名称用空格分隔；如果要指定动画退出效果，则用逗号分隔。
duration Number 100 动画持续时间。
delay Number 0 显示延迟时间。
cls String uk-active 激活状态的类。
container String 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();

隐藏工具提示。

可访问性

Tooltip 组件遵循 Tooltip Widget WAI-ARIA 设计模式，并会自动设置合适的 WAI-ARIA 角色、状态和属性。