无法制作多行matTooltip，总是得到单行

Question

使用 [matTooltip]="myMultiLineStringGenerator()" 结合 [matTooltipClass]="'my-tooltip'" 我期待给我多行工具提示，无论我得到一个线性工具提示，我无法控制行何时结束和移动到下一行。

重现步骤

HTML部分

<p  [matTooltipClass]="'my-tooltip'"
    [matTooltip]="getTooltopScript(nearestStations)">
            Hello World!
</p>

CSS部分：

.mat-tooltip {
    white-space: pre-line;
}

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

打字稿

getTooltopScript(ns: any[]]){
      let part1 =  ns[0]['stationName'] ;
      let part2 = ns[0]['regionName'];
      return `${part1}.\r\n\
       ${part2}.`;
}

我已经阅读了很多其他堆栈流，并且所有这些都以在 css 中使用 whitespace:pre-line 和 js\\type 脚本中的\\r\\n来创建字符串结束。 我不知道我还应该做什么才能让它发挥作用

请帮忙 ：）

从其他堆栈流更新 CSS，并在下面进行第一条评论。 我还是没有结果

::ng-deep .mat-tooltip .cdk-overlay-container, ::ng-deep .mat-tooltip .cdk- 
    global-overlay-wrapper {
    white-space: pre-line;
}

Answer 1

如果您的文本来自 ts 文件，请找到以下解决方案：

在 .ts 文件中：

getTooltopScript(){
  return 'Multiline Tooltip \n This is second line';
}

在 HTML 中：

<p #tooltip2="matTooltip" [matTooltip]="getTooltopScript()">Hello World!</p>

在 css 文件中：

::ng-deep .cdk-overlay-container, .cdk-global-overlay-wrapper {
  white-space: pre-line;
}

为了正确看到工具提示，我们需要在全局样式表（即style.css）中添加材料样式导入：

在 style.css 中：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

请在下面找到工作示例：

https://angular-sf-tooltip-issue-fix.stackblitz.io

https://stackblitz.com/edit/angular-sf-tooltip-issue-fix?file=src%2Fapp%2Fapp.module.ts

Answer 2

为此，我们需要覆盖.cdk-overlay-container、.cdk-global-overlay-wrapper的样式：

::ng-deep .cdk-overlay-container, .cdk-global-overlay-wrapper {
  white-space: pre-line;
}

在 HTML 中：

<p matTooltip="Multiline Tooltip &#13; This is second line">Hello World!</p>

希望这将为您解决问题。 请在下面找到工作示例：

https://angular-sf-tooltip-issue-fix.stackblitz.io

https://stackblitz.com/edit/angular-sf-tooltip-issue-fix?file=src%2Fapp%2Fapp.module.ts