在Angular Material中的img标签中使用md-tooltip [英] md-tooltip within img tag in Angular Material
本文介绍了在Angular Material中的img标签中使用md-tooltip的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
< md-menu md-position- mode =target-left target>
< img src =assets / img / silver1.png>
< md-tooltip md-direction ='right'>
4个银色徽章
< / md-tooltip>
< / img>
< img src =assets / img / gold1.png> 2
< md-tooltip md-direction ='right'>
2金徽章
< / md-tooltip>
< / img>
< img src =assets / img / platinum1.png> 1
< md-tooltip md-direction ='right'>
1白金徽章
< / 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个银色徽章
< / md-tooltip>
< / span>
< span>
< img src =assets / img / gold1.png> 2
< md-tooltip md-direction ='right'>
2金徽章
< / md-tooltip>
< / span>
< span>
< img src =assets / img / platinum1.png> 1
< md-tooltip md-direction ='right'>
1白金徽章
< / md-tooltip>
< / span>
< / md-menu>
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>
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 ?
解决方案
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屋!
查看全文