我在angular-material中使用ngx-tooltip，但工具提示正在被切断，任何方式来调整z-index？

Question

我正在使用ngx-tooltip（https://www.npmjs.com/package/ngx-tooltip）与angular.material.io选项卡，并遇到工具提示在md-tab容器内部左侧被切断的问题。我该如何做到这一点，使工具提示浮于一切？有什么方法可以调整工具提示的z-index或者有其他方法吗？

代码：

<md-tab-group> 
<md-tab label="Tab 1"> 
    <!-- tooltip with dynamic html content --> 
    <div> 
     <tooltip-content #myTooltip> 
      <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span> 
      <b><i><span style="color: #ffc520">Tooltip With</span></i></b> <small>Html support</small>. 
     </tooltip-content> 

     <button [tooltip]="myTooltip">hover this button to see a tooltip</button> 
    </div> 

</md-tab> 
</md-tab-group> 

Answer 1

我this plunker转载您的问题。为了使MD-标签的容器的工具提示可见外，我不得不做以下（见this corrected plunker）：

1. 在组件装饰，我设置的封装，ViewEncapsulation.None：

import {ViewEncapsulation} from '@angular/core'; 

@Component({ 
    ... 
    styleUrls: ["./tabs-overview-example.css"], 
    encapsulation: ViewEncapsulation.None 
}) 

1. 在CSS文件中，我设置overflow属性如下：

md-tab-group, 
md-tab-body, 
.mat-tab-body-wrapper, 
.mat-tab-body-content 
{ 
    overflow: visible !important; 
} 

开始=>

Answer 2

假设#myTooltip是参考你的提示，在组件

import {Input, ElementRef, AfterViewInit, Component } from '@angular/core'; 

@Component(...) 
export class MyComponent implements AfterViewInit { 
    @Input() myTooltip: ElementRef; 

    ngAfterViewInit() { 
     this.myTooltip.nativeElement.style.zIndex = '9999 !important'; 
    } 
}