docs: translation tooltip (#2577)

pull/2931/head
lixiaochou077 9 years ago committed by Benjy Cui
parent 536de74b62
commit 9cec8af5f7

@ -1,16 +1,24 @@
---
order: 0
title: 基本
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
The simplest usage.
````jsx
import { Tooltip } from 'antd';
ReactDOM.render(
<Tooltip title="提示文字">
<span>鼠标移上来就会出现提示</span>
<Tooltip title="prompt text">
<span>Text will show when mouse enter.</span>
</Tooltip>
, mountNode);
````

@ -1,58 +1,66 @@
---
order: 1
title: 位置
title:
zh-CN: 位置
en-US: Placement
---
## zh-CN
位置有 12 个方向。
## en-US
The ToolTip has 12 placements choice.
````jsx
import { Tooltip } from 'antd';
const text = <span>提示文字</span>;
const text = <span>prompt text</span>;
ReactDOM.render(
<div>
<div style={{ marginLeft: 60 }}>
<Tooltip placement="topLeft" title={text}>
<a href="#">上左</a>
<a href="#">topLeft</a>
</Tooltip>
<Tooltip placement="top" title={text}>
<a href="#">上边</a>
<a href="#">top</a>
</Tooltip>
<Tooltip placement="topRight" title={text}>
<a href="#">上右</a>
<a href="#">topRight</a>
</Tooltip>
</div>
<div style={{ width: 60, float: 'left' }}>
<Tooltip placement="leftTop" title={text}>
<a href="#">左上</a>
<a href="#">leftTop</a>
</Tooltip>
<Tooltip placement="left" title={text}>
<a href="#">左边</a>
<a href="#">left</a>
</Tooltip>
<Tooltip placement="leftBottom" title={text}>
<a href="#">左下</a>
<a href="#">leftBottom</a>
</Tooltip>
</div>
<div style={{ width: 60, marginLeft: 270 }}>
<Tooltip placement="rightTop" title={text}>
<a href="#">右上</a>
<a href="#">rightTop</a>
</Tooltip>
<Tooltip placement="right" title={text}>
<a href="#">右边</a>
<a href="#">right</a>
</Tooltip>
<Tooltip placement="rightBottom" title={text}>
<a href="#">右下</a>
<a href="#">rightBottom</a>
</Tooltip>
</div>
<div style={{ marginLeft: 60, clear: 'both' }}>
<Tooltip placement="bottomLeft" title={text}>
<a href="#">下左</a>
<a href="#">bottomLeft</a>
</Tooltip>
<Tooltip placement="bottom" title={text}>
<a href="#">下边</a>
<a href="#">bottom</a>
</Tooltip>
<Tooltip placement="bottomRight" title={text}>
<a href="#">下右</a>
<a href="#">bottomRight</a>
</Tooltip>
</div>
</div>

@ -0,0 +1,23 @@
---
category: Components
type: Views
title: Tooltip
---
A simple text popup tip.
## When To Use
- The tip shows while mouse enter, and hides while mouse leave, the ToolTip doesn't support complex text and operation.
- It can provide a explain of `button/text/opration`, that can cover the usage of the default system `title`.
## API
| Property | Description | Type | Default |
|-----------|------------------------------------------|------------|--------|
| placement | to set the position, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
| title | prompt text | string/React.Element | - |
| getTooltipContainer | to set the container of the tip, while the default is to create a `div` element in `body` | Function(triggerNode) | () => document.body |
You can visit https://github.com/react-component/tooltip for more API.
Loading…
Cancel
Save