使用 Angular Material ToolTip 但无法选择其下方元素上的文本

Question

我有一个 Angular Material 工具提示，用于在将鼠标悬停在表格元素中的列单元格上时显示信息。除了这个功能之外，我还要求用户能够选择文本并从表格元素中突出显示它，以便他们可以复制和粘贴它。

因为我使用 Angular Material 工具提示和 ::ng-deep 将它显示在列的顶部，它会在现有的 DOM 元素上创建一个叠加层，因此我无法选择列中的文本。有没有办法解决？我必须编辑 matToolTip 类吗？

谢谢！

我的最终解决方案是使用更原生的工具提示元素，这些元素将成为 DOM 的一部分，并且不会阻止用户选择文本，但这不是那么漂亮，所以这是我最后的手段。

edit.component.html

import { MatTooltipModule } from '@angular/material/tooltip';

<ng-container matColumnDef="DepartmentName">
        <th mat-header-cell *matHeaderCellDef></th>
        <td
          mat-cell
          *matCellDef="let row"
          [matTooltip]="getTooltipMissingDepartments(row)"
          matTooltipClass="missing-mds-tooltip"
        >
          {{ row?.DepartmentName }}
        </td>
      </ng-container>

edit.component.scss

::ng-deep .missing-mds-tooltip {
  white-space: pre-line;
}

用户应该能够将鼠标悬停在该列上并查看工具提示，并突出显示该列的表格中的文本。

Answer 1

为了使其正常工作，我将以下提供程序添加到我的自定义 NgModule 中，该提供程序导入了我在应用程序中使用的所有 Angular Material 组件，然后根据需要导入这些组件

import { MAT_HAMMER_OPTIONS } from '@angular/material';

@NgModule({
  // imports, exports, etc. go here

  providers: [
    {
      provide: MAT_HAMMER_OPTIONS,
      useValue: {
        cssProps: {
          userSelect: true
        }
      },
    },
  ],
})