Angular Material中img标签内的md-tooltip答案

【问题标题】：md-tooltip within img tag in Angular MaterialAngular Material中img标签内的md-tooltip
【发布时间】：2020-10-24 00:19:52
【问题描述】：

我想在悬停在 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 个白金徽章）。关于如何解决这个问题的任何想法？

【问题讨论】：

标签： html angular-material

【解决方案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>

【讨论】：

【解决方案2】：

我发现可行的方法是使用按钮。以我将工具提示应用于图像的以下示例为例：

                        <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>

【讨论】：