常に表示ツールチップ（角Material2）

Question

私は、ツールチップは、デフォルトでは "ホバー" に表示somebuttons

  <button mdTooltip="bye" mdTooltipPosition="left" md-mini-fab> 
       BYE 
      </button> 
      <button mdTooltip="hi" mdTooltipPosition="left" md-mini-fab> 
       HI 
      </button> 

を持っています。それは常にそれを表示させる方法はありますか？ （ページのロードに表示するとまま）

Answer 1

まず輸入を追加します。

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