Angular Material img 标签内的 md-tooltip
md-tooltip within img tag in Angular Material
我想在悬停在 3 个不同的图像上时显示 3 个不同的工具提示:
<md-menu md-position-mode="target-left target" >
<img src="assets/img/silver1.png">
<md-tooltip md-direction="'right'">
4 silver badges
</md-tooltip>
</img>
<img src="assets/img/gold1.png">2
<md-tooltip md-direction="'right'">
2 gold badges
</md-tooltip>
</img>
<img src="assets/img/platinum1.png">1
<md-tooltip md-direction="'right'">
1 platinum badge
</md-tooltip>
</img>
</md-menu>
但是在将鼠标悬停在任何图像上时,我得到了最后声明的工具提示(1 白金徽章)。知道如何解决这个问题吗?
我无法在 img
标记内执行此操作。
解决方法是将 img
标签包裹在 span
标签中,如下所示:
<md-menu md-position-mode="target-left target" >
<span>
<img src="assets/img/silver1.png">
<md-tooltip md-direction="'right'">
4 silver badges
</md-tooltip>
</span>
<span>
<img src="assets/img/gold1.png">2
<md-tooltip md-direction="'right'">
2 gold badges
</md-tooltip>
</span>
<span>
<img src="assets/img/platinum1.png">1
<md-tooltip md-direction="'right'">
1 platinum badge
</md-tooltip>
</span>
</md-menu>
我发现可行的方法是使用按钮。以我将工具提示应用于图像的以下示例为例:
<button mat-flat-button #tooltip="matTooltip"
[matTooltip]="user.name"
matTooltipPosition="above"
aria-label="Profile image button which displays tooltip when hovered over."
class="profile-button">
<img class="profile-img" src="[your_image.png]">
</button>
我想在悬停在 3 个不同的图像上时显示 3 个不同的工具提示:
<md-menu md-position-mode="target-left target" >
<img src="assets/img/silver1.png">
<md-tooltip md-direction="'right'">
4 silver badges
</md-tooltip>
</img>
<img src="assets/img/gold1.png">2
<md-tooltip md-direction="'right'">
2 gold badges
</md-tooltip>
</img>
<img src="assets/img/platinum1.png">1
<md-tooltip md-direction="'right'">
1 platinum badge
</md-tooltip>
</img>
</md-menu>
但是在将鼠标悬停在任何图像上时,我得到了最后声明的工具提示(1 白金徽章)。知道如何解决这个问题吗?
我无法在 img
标记内执行此操作。
解决方法是将 img
标签包裹在 span
标签中,如下所示:
<md-menu md-position-mode="target-left target" >
<span>
<img src="assets/img/silver1.png">
<md-tooltip md-direction="'right'">
4 silver badges
</md-tooltip>
</span>
<span>
<img src="assets/img/gold1.png">2
<md-tooltip md-direction="'right'">
2 gold badges
</md-tooltip>
</span>
<span>
<img src="assets/img/platinum1.png">1
<md-tooltip md-direction="'right'">
1 platinum badge
</md-tooltip>
</span>
</md-menu>
我发现可行的方法是使用按钮。以我将工具提示应用于图像的以下示例为例:
<button mat-flat-button #tooltip="matTooltip"
[matTooltip]="user.name"
matTooltipPosition="above"
aria-label="Profile image button which displays tooltip when hovered over."
class="profile-button">
<img class="profile-img" src="[your_image.png]">
</button>