# Tooltip

# Usage

## Basic

```tsx
import React from 'react'
import { Tooltip } from 'react-icecream'

export default () => {
  return <Tooltip title="提示信息">hover 这里</Tooltip>
}
```

## 不同的位置

```tsx
import React from 'react'
import { Tooltip, Button } from 'react-icecream'

export default () => {
  return (
    <div className="buttons-wrapper">
      <Tooltip placement="left" title="提示信息"><Button>left</Button></Tooltip>
      <Tooltip placement="top" title="提示信息"><Button>top</Button></Tooltip>
      <Tooltip placement="bottom" title="提示信息"><Button>bottom</Button></Tooltip>
      <Tooltip placement="right" title="提示信息"><Button>right</Button></Tooltip>
      <br />
      <Tooltip placement="topLeft" title="提示信息"><Button>topLeft</Button></Tooltip>
      <Tooltip placement="topRight" title="提示信息"><Button>topRight</Button></Tooltip>
      <Tooltip placement="bottomLeft" title="提示信息">
        <Button>bottomLeft</Button>
      </Tooltip>
      <Tooltip placement="bottomRight" title="提示信息">
        <Button>bottomRight</Button>
      </Tooltip>
    </div>
  )
}
```

## 内置了最大宽度

```tsx
import React from 'react'
import { Tooltip } from 'react-icecream'

export default () => {
  return <Tooltip title="部分资源可能会由于未接入服务，而无法在此模块中展示。当前仅支持测试域名，SSL证书，云主机相关产品的到期提醒。">hover 这里</Tooltip>
}
```

<API></API>