Question

html代码

<td >  
 <input type="text" class="form-control"  value="create.qty[i]"   (mouseenter)="toggle()" (mouseleave)="toggle()" name="qty"       [(ngModel)]="this.create.qty[i]" #qty="ngModel" (change)="onqtyadd($event.target.value,i)"  >
 <div *ngIf="show">
 <div  *ngIf="show" style="border-radius: 6px;z-index: 8;position: absolute; background-color:black;height: 15%;padding-left:10px;color:white; width: 5%;"><p>{{qtyhover[i]}}</p></div>
 </div>
</td>

我只想显示所选字段，但它会在动态表的每个字段中显示悬停

enter image description here

Answer 1

使用boolean属性代替number使用show:number

并在show和html中将索引（当前）设置为mouseenter/leave，并在html中询问show == {index

在HTML中：

（您不必ngIf只问两次div）

<input type="text" class="form-control"  (mouseenter)="show=i" (mouseleave)="show=0">
<div *ngIf="show==1">
  <div>your tooltip 1 </div>
</div>

查看示例：https://stackblitz.com/edit/hello-angular-6-eu5ecu?file=src/app/app.component.html

工具提示悬停在角度2中的选定字段上

1 个答案: