ng-ytl-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
67 lines (65 loc) • 2.19 kB
text/typescript
import { Component } from '@angular/core';
@Component({
selector: 'nz-demo-tooltip-position',
template: `
<div style="margin-left:60px;">
<nz-tooltip [nzTitle]="'prompt text'" [nzPlacement]="'topLeft'">
<a nz-tooltip>TL</a>
</nz-tooltip>
<nz-tooltip [nzTitle]="'prompt text'" [nzPlacement]="'top'">
<a nz-tooltip>Top</a>
</nz-tooltip>
<nz-tooltip [nzTitle]="'prompt text'" [nzPlacement]="'topRight'">
<a nz-tooltip>TR</a>
</nz-tooltip>
</div>
<div style="float:left;width: 60px;">
<nz-tooltip [nzTitle]="'prompt text'" [nzPlacement]="'leftTop'">
<a nz-tooltip>LT</a>
</nz-tooltip>
<nz-tooltip [nzTitle]="'prompt text'" [nzPlacement]="'left'">
<a nz-tooltip>Left</a>
</nz-tooltip>
<nz-tooltip [nzTitle]="'prompt text'" [nzPlacement]="'leftBottom'">
<a nz-tooltip>LB</a>
</nz-tooltip>
</div>
<div style="margin-left:270px;width: 60px;">
<nz-tooltip [nzTitle]="'prompt text'" [nzPlacement]="'rightTop'">
<a nz-tooltip>RT</a>
</nz-tooltip>
<nz-tooltip [nzTitle]="'prompt text'" [nzPlacement]="'right'">
<a nz-tooltip>Right</a>
</nz-tooltip>
<nz-tooltip [nzTitle]="'prompt text'" [nzPlacement]="'rightBottom'">
<a nz-tooltip>RB</a>
</nz-tooltip>
</div>
<div style="margin-left:60px;clear: both;">
<nz-tooltip [nzTitle]="'prompt text'" [nzPlacement]="'bottomLeft'">
<a nz-tooltip>BL</a>
</nz-tooltip>
<nz-tooltip [nzTitle]="'prompt text'" [nzPlacement]="'bottom'">
<a nz-tooltip>Bottom</a>
</nz-tooltip>
<nz-tooltip [nzTitle]="'prompt text'" [nzPlacement]="'bottomRight'">
<a nz-tooltip>BR</a>
</nz-tooltip>
</div>
`,
styles : [
`a {
display: inline-block;
line-height: 32px;
height: 32px;
width: 60px;
font-size: 14px;
text-align: center;
background: #f5f5f5;
margin-right: 1em;
margin-bottom: 1em;
border-radius: 6px;
}`
]
})
export class NzDemoTooltipPositionComponent { }