Skip to content

A
ant-design

wanjj_1210 / ant-design
与 Fork 源项目一致

从无法访问的项目Fork

通知 10
Star 0
Fork 0
A
ant-design

体验新版 GitCode，发现更多精彩内容 >>

提交 d124dca7 编写于 作者: A afc163
浏览文件
操作

better placement demo

上级 f7c35503
隐藏空白更改
内联 并排
Showing with 49 addition and 42 deletion
components/tooltip/demo/placement.md
浏览文件 @ d124dca7
......@@ -12,44 +12,50 @@ const text = <span>提示文字</span>;
ReactDOM.render(
<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 style={{marginLeft: 95}}>
<Tooltip placement="topLeft" title={text}>
<a href="#">上左 topLeft</a>
</Tooltip>
<Tooltip placement="top" title={text}>
<a href="#">上边 top</a>
</Tooltip>
<Tooltip placement="topRight" title={text}>
<a href="#">上右 topRight</a>
</Tooltip>
</div>
<div style={{width: 100, float: 'left'}}>
<Tooltip placement="leftTop" title={text}>
<a href="#">左上</a>
</Tooltip>
<Tooltip placement="left" title={text}>
<a href="#">左下</a>
</Tooltip>
<Tooltip placement="leftBottom" title={text}>
<a href="#">左下</a>
</Tooltip>
</div>
<div style={{width: 100, float: 'right'}}>
<Tooltip placement="rightTop" title={text}>
<a href="#">右上</a>
</Tooltip>
<Tooltip placement="right" title={text}>
<a href="#">右边</a>
</Tooltip>
<Tooltip placement="rightBottom" title={text}>
<a href="#">右下</a>
</Tooltip>
</div>
<div style={{marginLeft: 95, clear: 'both'}}>
<Tooltip placement="bottomLeft" title={text}>
<a href="#">上右</a>
</Tooltip>
<Tooltip placement="bottom" title={text}>
<a href="#">下边</a>
</Tooltip>
<Tooltip placement="bottomRight" title={text}>
<a href="#">下右</a>
</Tooltip>
</div>
</div>
, document.getElementById('components-tooltip-demo-placement'));
````
......@@ -57,11 +63,12 @@ ReactDOM.render(
<style>
#components-tooltip-demo-placement a {
display: inline-block;
line-height: 40px;
height: 40px;
width: 80px;
line-height: 32px;
height: 32px;
width: 90px;
font-size: 12px;
text-align: center;
background: #f6f6f6;
background: #f5f5f5;
margin-right: 1em;
margin-bottom: 1em;
border-radius: 6px;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或