mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 07:56:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

update demo

Browse Source
This commit is contained in:
afc163 2015-11-03 14:25:34 +08:00
parent 052e8ee0f4
commit e8c47a9fb5
2 changed files with 47 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
components/tooltip/demo/placement.md
View File

@ -12,54 +12,58 @@ const text = <span>提示文字</span>;
ReactDOM.render(
<div>
<div style={{margin:10}}>
<Tooltip placement="left" title={text}>
<a href="#">左边 要对齐</a>
</Tooltip>
<Tooltip placement="top" title={text}>
<a href="#">上边 要对齐</a>
</Tooltip>
<Tooltip placement="bottom" title={text}>
<a href="#">下边 要对齐</a>
</Tooltip>
<Tooltip placement="right" title={text}>
<a href="#">右边 要对齐</a>
</Tooltip>
</div>
<div style={{margin:10}}>
<Tooltip placement="leftTop" title={text}>
<a href="#">左上 要对齐</a>
</Tooltip>
<Tooltip placement="leftBottom" title={text}>
<a href="#">左下 要对齐</a>
</Tooltip>
<Tooltip placement="rightTop" title={text}>
<a href="#">右上 要对齐</a>
</Tooltip>
<Tooltip placement="rightBottom" title={text}>
<a href="#">右下 要对齐</a>
</Tooltip>
</div>
<div style={{margin:10}}>
<Tooltip placement="topLeft" title={text}>
<a href="#">上左 要对齐</a>
</Tooltip>
<Tooltip placement="topRight" title={text}>
<a href="#">上右 要对齐</a>
</Tooltip>
<Tooltip placement="bottomLeft" title={text}>
<a href="#">下左 要对齐</a>
</Tooltip>
<Tooltip placement="bottomRight" title={text}>
<a href="#">下右 要对齐</a>
</Tooltip>
</div>
<Tooltip placement="left" title={text}>
<a href="#">左边</a>
</Tooltip>
<Tooltip placement="top" title={text}>
<a href="#">上边</a>
</Tooltip>
<Tooltip placement="bottom" title={text}>
<a href="#">下边</a>
</Tooltip>
<Tooltip placement="right" title={text}>
<a href="#">右边</a>
</Tooltip>
<br />
<Tooltip placement="leftTop" title={text}>
<a href="#">左上</a>
</Tooltip>
<Tooltip placement="leftBottom" title={text}>
<a href="#">左下</a>
</Tooltip>
<Tooltip placement="rightTop" title={text}>
<a href="#">右上</a>
</Tooltip>
<Tooltip placement="rightBottom" title={text}>
<a href="#">右下</a>
</Tooltip>
<br />
<Tooltip placement="topLeft" title={text}>
<a href="#">上左</a>
</Tooltip>
<Tooltip placement="topRight" title={text}>
<a href="#">上右</a>
</Tooltip>
<Tooltip placement="bottomLeft" title={text}>
<a href="#">下左</a>
</Tooltip>
<Tooltip placement="bottomRight" title={text}>
<a href="#">下右</a>
</Tooltip>
</div>
, document.getElementById('components-tooltip-demo-placement'));
````
<style>
#components-tooltip-demo-placement a {
display: inline-block;
line-height: 40px;
height: 40px;
width: 80px;
text-align: center;
background: #f6f6f6;
margin-right: 1em;
margin-bottom: 1em;
border-radius: 6px;
}
</style>

2
components/tooltip/index.md
View File

@ -18,5 +18,5 @@
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
| placement | 气泡框位置，可选 `top/left/right/bottom` | string | top |
| placement | 气泡框位置，可选 `top/left/right/bottom/topLeft/topRight/bottomLeft/bottomRight/leftTop/leftBottom/rightTop/rightBottom` | string | top |
| title | 提示文字 | string/jsx | 无 |