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

我正在使用ngx-tooltip（https://www.npmjs.com/package/ngx-tooltip）與angular.material.io選項卡，並遇到工具提示在md-tab容器內部左側被切斷的問題。我該如何做到這一點，使工具提示浮於一切？有什麼方法可以調整工具提示的z-index或者有其他方法嗎？我在angular-material中使用ngx-tooltip，但工具提示正在被切斷，任何方式來調整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>

來源

2017-06-22 Rolando

這是很難說的東西沒有代碼...張貼一些代碼，（也許）一plunker能重現問題。另外，不是md-tooltip填寫你的要求？ – developer033

md-tooltip沒有自定義顏色/樣式的HTML模板的靈活性...（除非我失去了一些東西）。我正在使用與此處的ngx-tooltip類似的示例。用代碼更新OP。 – Rolando

@Rolando你能否提供一個支持此工作的小提琴 –

我this plunker轉載您的問題。爲了使MD-標籤的容器的工具提示可見外，我不得不做以下（見this corrected plunker）：

在組件裝飾，我設置的封裝，ViewEncapsulation.None：

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

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

在CSS文件中，我設置overflow屬性如下：

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

來源

2017-06-30 00:45:30 ConnorsFan

假設#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'; 
    } 
}

來源

2017-06-30 08:05:17 trichetriche

我遇到的問題這是如果我有20個工具提示，所以我動態地使用「ngFor」來創建它們，我如何動態鏈接這些ElementRefs到＃myTooltip1，＃myTooltip3，＃myTooltip4？我將如何甚至ngFor創建這些？ – Rolando

其他問題是我有2個選項卡，所以在初始化時，工具提示不顯示，直到用戶切換到第二個選項卡。 – Rolando

你只需要給他們一個類，讓我們說'top-z-tooltip'，在那裏你設置z-index爲9999。 – trichetriche

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

回答

相關問題