工具提示／Tooltip

# 工具提示／Tooltip

<p class="uk-text-lead">轻松创建漂亮的工具提示。</p>

## Usage-用法

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

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

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

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

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

***

## Alignment-对齐

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

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

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

```example
<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-延迟

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

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

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

***

## Component options-组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项      | 可选值  | 默认值                 | 描述                       |
|:------------|:-------|:------------------------|:----------------------------|
| `title`     | String | ``                      | 工具提示文字。                             |
| `pos`       | String | `top`                   | 工具提示位置。                  |
| `offset`    | Number | `false`                 | 工具提示偏移量。         |
| `animation` | String | `uk-animation-scale-up` | 用空格分隔要使用的动画名称。出场动画用逗号隔开。 |
| `duration`  | Number | `100`                   | 动画持续时间    |
| `delay`     | Number | `0`                     | 显示工具提示的延迟时间       |
| `cls`       | String | `uk-active`             | 活动状态     |
| `container` | String | `body`                  | 通过选择器定义目标容器，以指定工具提示应在DOM中附加的位置。 |

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

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

***

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 初始化

```js
UIkit.tooltip(element, options);
```

### 事件

在此组件注入的元素上将触发以下事件：

| Name         | 描述                                                              |
|:-------------|:-------------------------------------------------------------------------|
| `beforeshow` | 在显示项目之前触发。 通过在事件上调用 `preventDefault()` 可以阻止显示。 |
| `show`       | 显示项目后触发。                                            |
| `shown`      | 项目的显示动画完成后触发。                     |
| `beforehide` | 在隐藏物品之前触发。 通过在事件上调用 `preventDefault()` 可以防止隐藏。 |
| `hide`       | 在项目的隐藏动画开始后触发。                       |
| `hidden`     | 物品被隐藏后触发。                                          |

#### 例子

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

### 方法

以下方法可用于该组件：

#### Show

```js
UIkit.tooltip(element).show();
```

显示工具提示。

#### Hide

```js
UIkit.tooltip(element).hide();
```

隐藏工具提示。