始终显示工具提示(角度材质2)

2024-01-24

我有一些按钮

            <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(使用前将#替换为@)

始终显示工具提示(角度材质2) 的相关文章

随机推荐