angular - 仅在 Angular Material 工具提示中的第一行应用样式

Question

我在我的元素中使用 Angular Material 工具提示。我想在 tooptip 中插入更多的 1 句子，并且我只想在第一行添加粗体样式。

我的 HTML 代码:

 <div fxFlex="100" *ngFor="let data of slider_data" fxLayoutAlign="center" [matTooltip]="slider_data.onHover" matTooltipClass="tooltip">
     <div class="animation-container" fxLayoutGap="10px" fxLayoutAlign="center center">
        <div class="slider-font">{{data.value.toFixed(1)}}%</div>
    </div>
 </div>

我的 TS 代码:

slider_data: Array<object> = [
    {
      name: "sold items",
      rate: "32,560",
      value: 0.8,
      onHover: "this is first sentence\n this is the second sentence\n this is the third sentence\n",
    },
    {...}
]

我该怎么做？

Answer 1

首先，在您的 html 模板上，我认为您的意思是 [matTooltip]="data.onHover" 而不是 [matTooltip]="slider_data.onHover"

关于自定义工具提示，遵循 Angular Material example ,并添加一些额外的 css，您可以通过以下方式实现:

将 View 封装更改为无:

import { ViewEncapsulation } from '@angular/core';
@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

更改工具提示中空白的处理方式:

.tooltip {
  white-space: pre;
}

使用 css ::first-line 选择器在第一行做任何你需要的格式:

.tooltip::first-line {
  font-weight: bold;
}