# Tooltip

提示内容

## basic use

```js
import { Tooltip } from 'amos-framework';

<Tooltip title="你好呀">鼠标悬浮试试</Tooltip>
```

## 案例演示

### Tooltip 基本使用

---demo
```js
import { Tooltip, Button } from 'amos-framework';

const styles = {
  box: {
    width: '400px'
  },
  top: {
    textAlign: 'center'
  },
  left: {
    float: 'left',
    width: '60px'
  },
  right: {
    float: 'right',
    width: '60px'
  },
  bottom: {
    clear: 'both',
    textAlign: 'center'
  },
  btnT: {
    marginTop: 8
  },
  btnL: {
    marginLeft: 8
  }
};

ReactDOM.render((
  <div style={styles.box}>
    <div style={styles.top}>
      <Tooltip className="item" title="up left 提示文字" direction="up" align="left">
        <Button>上左</Button>
      </Tooltip>
      <Tooltip className="item" title="up middle 提示文字" direction="up" align="middle">
        <Button style={styles.btnL}>上中</Button>
      </Tooltip>
      <Tooltip className="item" title="up right 提示文字" direction="up" align="right">
        <Button style={styles.btnL}>上右</Button>
      </Tooltip>
    </div>
    <div style={styles.left}>
      <Tooltip className="item" title="left top 提示文字" direction="left" align="top">
        <Button>左上</Button>
      </Tooltip>
      <Tooltip className="item" title="left middle 提示文字" direction="left" align="middle">
        <Button style={styles.btnT}>左中</Button>
      </Tooltip>
      <Tooltip className="item" title="left bottom 提示文字" direction="left" align="bottom">
        <Button style={styles.btnT}>左下</Button>
      </Tooltip>
    </div>

    <div style={styles.right}>
      <Tooltip className="item" title="right top 提示文字" direction="right" align="top">
        <Button>右上</Button>
      </Tooltip>
      <Tooltip className="item" title="right middle 提示文字" direction="right" align="middle">
        <Button style={styles.btnT}>右中</Button>
      </Tooltip>
      <Tooltip className="item" title="right bottom 提示文字" direction="right" align="bottom">
        <Button style={styles.btnT}>右下</Button>
      </Tooltip>
    </div>
    <div style={styles.bottom}>
      <Tooltip className="item" title="down left 提示文字" direction="down" align="left">
        <Button>下左</Button>
      </Tooltip>
      <Tooltip className="item" title="down middle 提示文字" direction="down" align="middle">
        <Button style={styles.btnL}>下中</Button>
      </Tooltip>
      <Tooltip className="item" title="down right 提示文字" direction="down" align="right">
        <Button style={styles.btnL}>下右</Button>
      </Tooltip>
    </div>
  </div>
), _react_runner_);
```
---demoend

### Tooltip 内容

---demo
```js
import { Tooltip, Button, Icon } from 'amos-framework';

const one = '我是提示内容';

ReactDOM.render((
  <div>
    <Tooltip
      title={one}
    >
      <span><Icon icon="message" />tooltip-up</span>
    </Tooltip>
    <br />
    <Tooltip
      title={one}
      direction="down"
    >
      <span><Icon icon="warning" />tooltip-down</span>
    </Tooltip>
    <br />
    <Tooltip
      title={one}
    >
      <Icon icon="message" />
    </Tooltip>
  </div>
), _react_runner_);
```
---demoend

### PopConfirm 内容

> 通过设置 `ignoreHoverTriggerClick=false`, 在 hover 模式下，点击 trigger，可以阻止关闭 pop

---demo
```js
import { Flex, PopConfirm } from 'amos-framework';

const one = '是否删除';

function confirm(e) {
  console.log(e);
}

function cancel(e) {
  console.log(e);
}

ReactDOM.render((
  <Flex gap="mid">
    <PopConfirm
      title={one}
      onConfirm={confirm}
      onCancel={cancel}
    >
      <span><Icon icon="delete" />删除</span>
    </PopConfirm>
    <PopConfirm
      title={one}
      onConfirm={confirm}
      onCancel={cancel}
      triggerMode="hover"
      ignoreHoverTriggerClick={false}
    >
      <span><Icon icon="delete" />鼠标hover删除</span>
    </PopConfirm>
  </Flex>
), _react_runner_);
```
---demoend

## props

| params  | type | default | description |
| --- | --- | --- | --- |
| prefixCls | string | `amos` | css class 前缀 |
| className | string | - | css class |
| children | ReactNode | - | 触发元素 |
| title | `element、string、number` | - | 提示框显示内容，可以是文本字符串，也可以是 React 元素 |
| triggerMode | string | hover | 触发方式，可选值'hover', 'click' |
| direction | string | up | 触发元素，可选值'up', 'down', 'left', 'right'|
| align | string | middle | 触发元素,可选值'top', 'right', 'bottom', 'left', 'middle' |

> 更多 props 请查看 [提示 Popover](/#/framework/popover)

### PopConfirm props

| params  | type | default | description |
| --- | --- | --- | --- |
| prefixCls | string | `amos-popover` | css class 前缀 |
| title | ReactNode | - | 提示内容 |
| cancelText | string | `取消` | 取消按钮文本内容 |
| okText | string | `确定` | 确定按钮文本内容 |
| onCancel | func | -| 取消回调 |
| onConfirm | func | - | 确定回调 |