如何将 Mat Tooltip 位置调整到屏幕中心？

Question

我有一个垫子工具提示 用于页面上的 table 元素，该页面嵌入在页面的 iframe 中。当我想查看工具提示时，如果文本很长，则工具提示超出了框架的限制。

并且位置调整为"after":

<ng-container cdkColumnDef="budgetGroupName">
          <mat-header-cell *cdkHeaderCellDef fxFlex="20%">Budget Group</mat-header-cell>
          <mat-cell matTooltip="{{payroll.budgetGroupName}}" matTooltipPosition="after" *cdkCellDef="let payroll"
                    fxFlex="20%"><div class="wrapped-text">{{payroll.budgetGroupName}}</div></mat-cell>
        </ng-container>

我也尝试了 "right"、"above"，但它们也会跳出框架。我可以将它调整为例如 "center of the screen" 或 smth 其他以便看得更清楚吗？或者我只需要使用这 6 个不同的选项来定位，如右上、左上、爱、后、前，或者我可以手动调整到屏幕中间吗？

或者，如果可能的话，如果有在工具提示文本上滚动的功能，我也可以使用它来查看完整内容

Answer 1

这正是我上个月在使用 mat-tooltip 时遇到的问题，因为它不允许任何 HTML 支持，所以我想出了一个在所有情况下都能完美运行的解决方案，而且完全可定制。 sat-popover

<button [satPopoverAnchor]='popover' (click)="popover.toggle()">
  See Contact Details
</button>

<sat-popover #popover hasBackdrop>
  <app-contact-overview [contact]="myContact"></app-contact-overview>
</sat-popover>

我也尝试 ng2-tooltip-directive 但有时它会在随机位置显示 tooltip 所以我更喜欢使用 sat-popover 而不是它。

我也 post 关于 stack-overflow

的问题

如何将 Mat Tooltip 位置调整到屏幕中心？

How to adjust Mat Tooltip position to center of the screen?

html

css

tooltip

angular