我在angular-material中使用ngx-tooltip,但是工具提示被切断,任
发布时间:2020-12-17 17:23:19 所属栏目:安全 来源:网络整理
导读:我正在使用带有angular.material.io标签的ngx-tooltip( https://www.npmjs.com/package/ngx-tooltip)并遇到一个问题,当md-tab容器内部的工具提示似乎在左侧被切断.我如何使工具提示浮在一切之上?有什么方法可以调整工具提示的z-index还是有其他方法吗? 码
我正在使用带有angular.material.io标签的ngx-tooltip(
https://www.npmjs.com/package/ngx-tooltip)并遇到一个问题,当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> 解决方法
我在
this plunker中重现了您的问题.为了使工具提示在md-tab容器外可见,我必须执行以下操作(请参阅
this corrected plunker):
>在Component装饰器中,我将封装设置为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; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |