我有一些按钮
<button mdTooltip="bye" mdTooltipPosition="left" md-mini-fab>
BYE
</button>
<button mdTooltip="hi" mdTooltipPosition="left" md-mini-fab>
HI
</button>
默认情况下,工具提示显示在“悬停”上。有没有办法让它一直显示? (在页面加载和停留时显示)
首先添加导入:
import {MdTooltip} from '@angular/material';
然后将参考名称添加到工具提示中:
<div>
<button #tooltipBye="mdTooltip"
mdTooltip="bye"
mdTooltipPosition="below"
md-mini-fab>
BYE
</button>
<button #tooltipHi="mdTooltip"
mdTooltip="hi"
mdTooltipPosition="below"
mdTooltipHideDelay="1000"
md-mini-fab>
HI
</button>
</div>
在组件中传递这些元素的引用。然后使用AfterViewChecked
生命周期钩子来调用show()
method.
组件.ts:
@ViewChild('tooltipHi') tooltipHi: MdTooltip;
@ViewChild('tooltipBye') tooltipBye: MdTooltip;
ngAfterViewChecked(){
if(this.tooltipHi._isTooltipVisible() == false){
this.tooltipHi.show();
}
if(this.tooltipBye._isTooltipVisible() == false){
this.tooltipBye.show();
}
}
这是demo https://plnkr.co/edit/JP0mCkCCAdbayf7B7cT9?p=preview
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)