zent/src/tooltip/README_zh-CN.md

一套前端设计语言和基于React的实现

---
title: Tooltip
subtitle: 工具提示
path: component/tooltip
group: 信息展示
---

## Tooltip
- 多种触发方式：点击，鼠标移入，获得输入焦点，默认为 `hover` 时触发
- 只单纯做展示提示同 HTML `title` 属性，不承载过多的复杂操作

### API

| 参数        |   说明       | 类型     | 是否必须    | 默认值      | 备选值     |
| ------------| ----------- | -------- | ---------- | ---------- | ---------- |
| title | 弹层的提示文字 | node | 是 | | |
| trigger | 触发方式 | string | 否 | `'hover'` | `'click'`, `'hover'`, `'focus'`, `'none'` |
| position | 弹出框的位置，命名规则：相对触发元素的位置+箭头相对于Tooltip的位置。接受函数形式，参考 `Popover.Position.create` | string \| func | 否 | `'top-center'` |  |
| centerArrow | 是否按小箭头居中对齐trigger来定位 | bool | 否 | `false` |  |
| cushion | 与 Popover 中的`cushion`含义（定位的偏移量）相同，通常为弹框边缘与 trigger 元素之间的距离 | number | 否 | `10` |  |
| containerSelector | 弹层渲染加载到的父节点CSS selector | string | 否 | `'body'` | 所有合法的CSS selector |
| visible | 外部维护 `Tooltip` 的显示状态，此时外部拥有 `Tooltip` 的控制权 | bool | 否 |  | |
| onVisibleChange | 必须和 `visible` 一起使用 | func | 否 | | |
| className | 自定义类名 | string | 否 | `''` |  |
| style | 自定义样式 | CSSProperties | 否 |  |  |

#### 触发方式的额外API

根据 `trigger` 值的不同, `Tooltip` 提供了一些额外的控制参数，同`Pop`组件.

#### Click

| 参数 | 说明 | 类型 | 是否必须 | 默认值 |
|------|------|------|--------|-------|
| closeOnClickOutside | 点击弹层和trigger节点外部时自动关闭 | bool | 否 | `true` |

#### Hover

| 参数 | 说明 | 类型 | 是否必须 | 默认值 |
|------|------|------|--------|-------|
| mouseEnterDelay | hover打开的延迟（单位：毫秒） | number | 否 | `160` |
| mouseLeaveDelay | 关闭的的延迟（单位：毫秒） | number | 否 | `160` |
| fixMouseEventsOnDisabledChildren | 对禁用的 Input/Button 做鼠标事件的兼容处理 | boolean | 否 | `false` |

**注意：**`fixMouseEventsOnDisabledChildren` 仅对 Zent 组件有效。

背景

- [原生 `input` 和 `button` 在 disabled 状态下触发鼠标事件失效](https://github.com/youzan/zent/issues/142)

解决方案

- 先将元素 `input` 或 `button` 包裹在另一元素内部
- 再给元素 `input` 或 `button` 加样式 `{pointer-events: none}`

#### None

这种模式下 需要使用者自己在回调中控制 `visible` 来关闭 `Tooltip`.