Html 角度材质中img标记内的md工具提示
我想在悬停在3个不同的图像上时显示3个不同的工具提示:Html 角度材质中img标记内的md工具提示,html,angular-material,Html,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>
<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>
4枚银徽章
2.
2枚金徽章
1.
1枚白金徽章
但在任何一张图片上悬停,我都会得到最后一张(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>
4枚银徽章
2.
2枚金徽章
1.
1枚白金徽章
我发现有效的方法是使用按钮。以下面的示例为例,将工具提示应用于图像:
<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>