始终显示工具提示(Angular Material2) [英] Always Show Tooltip ( Angular Material2)
本文介绍了始终显示工具提示(Angular Material2)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一些按钮
<button mdTooltip="bye" mdTooltipPosition="left" md-mini-fab>
BYE
</button>
<button mdTooltip="hi" mdTooltipPosition="left" md-mini-fab>
HI
</button>
默认情况下,工具提示显示在悬停"上.有没有办法让它总是显示? (在页面上显示加载并停留)
The tooltips show on "hover" by default. Is there a way to make it always show? (Show on page load and stay)
推荐答案
首先添加导入:
import {MdTooltip} from '@angular/material';
然后在工具提示中添加参考名称:
then add reference names to tooltips:
<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()
方法.
Pass references of these elements in the component. Then use AfterViewChecked
lifecycle hook to call the show()
method.
component.ts:
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();
}
}
这是演示
这篇关于始终显示工具提示(Angular Material2)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文