無法制作多行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