始终显示工具提示(Angular Material2)
Always Show Tooltip ( Angular Material2)
我有一些按钮
<button mdTooltip="bye" mdTooltipPosition="left" md-mini-fab>
BYE
</button>
<button mdTooltip="hi" mdTooltipPosition="left" md-mini-fab>
HI
</button>
工具提示默认显示在 "hover" 上。有没有办法让它一直显示? (显示在页面加载并停留)
首先添加导入:
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()
方法。
component.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
我有一些按钮
<button mdTooltip="bye" mdTooltipPosition="left" md-mini-fab>
BYE
</button>
<button mdTooltip="hi" mdTooltipPosition="left" md-mini-fab>
HI
</button>
工具提示默认显示在 "hover" 上。有没有办法让它一直显示? (显示在页面加载并停留)
首先添加导入:
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()
方法。
component.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