Angular Material 中 img 标签内的 md-tooltip [英] md-tooltip within img tag in Angular Material

问题描述

我想在悬停在 3 个不同的图像上时显示 3 个不同的工具提示:

I want to show 3 different tooltips on hovering on 3 different images:

<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 个白金徽章).关于如何解决这个问题的任何想法?

But on hovering on any of the images, I'm getting the tooltip which is declared at the last (1 platinum badge). Any idea on how to solve this ?

推荐答案

我无法在 img 标记中执行此操作.解决方法是将 img 标签包裹在 span 标签中，如下所示:

I've not been able to do this within the img tag. The workaround can be to wrap the img tag within a span tag like this:

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

这篇关于Angular Material 中 img 标签内的 md-tooltip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！