image.png

image.png

<md-list-item class="container"
[@item]="widerPrioriity"
[ngClass]="{
'priority-important':item.priority===3,
'priority-emergency':item.priority===2,
'priority-normal':item.priority===1
}"
[app-draggable]="true"
[draggedClass]="'drag-start'"
[dragTag]="'task-item'"
[dragData]="item"
(click)="OnItemClick()"

<md-checkbox

class="completion-status"
[checked]="item.completed"
(click)="onCheckBoxClick($event)"

</md-checkbox>
<div md-line class="content" [ngClass]="{'completed':item.completed}">
<span [md-tooltip]="item.desc"> {{item.desc}} </span>

</div>
<div md-line class="bottom-bar">
<span class="duedate" *ngIf="item.dueDate">
{{item.dueDate | date :'yyyy-MM-dd'}}
</span>
<md-icon *ngIf="item.reminder">alarm</md-icon>
</div>
<md-icon [svgIcon]="avatar" md-list-avatar class="avatar"></md-icon>
</md-list-item>

image.png

加上md-tooltip的效果如下：

image.png