始终显示工具提示(Angular Material2) [英] Always Show Tooltip ( Angular Material2)

问题描述

我有一些按钮

 再见<button mdTooltip="hi" mdTooltipPosition="left" md-mini-fab>你好

工具提示默认显示在悬停"上.有没有办法让它一直显示?(在页面加载和停留时显示)

解决方案

首先添加导入:

从'@angular/material'导入{MdTooltip}；

然后在工具提示中添加引用名称:

<button #tooltipBye="mdTooltip"mdTooltip="再见"mdTooltipPosition="下方"md-mini-fab>再见<button #tooltipHi="mdTooltip"mdTooltip="嗨"mdTooltipPosition="下方"mdTooltipHideDelay="1000"md-mini-fab>你好

在组件中传递这些元素的引用.然后使用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();}}

这是演示

I have somebuttons

            <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)

解决方案

First add imports:

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>

Pass references of these elements in the component. Then use AfterViewChecked lifecycle hook to call the show() method.

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();
  }

}

Here's the demo

这篇关于始终显示工具提示(Angular Material2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！