仅在角度材质工具提示中对第一行应用样式

Question

我在项目中使用角度材质工具提示。我想在 tooptip 插入更多的 1 句话，并且我只想在第一行添加粗体样式。

我的网页代码：

 <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 sentencen this is the second sentencen this is the third sentencen",
    },
    {...}
]

我该怎么做？

Answer 1

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

关于自定义工具提示，请遵循角度材质示例，并添加一些额外的 CSS，您可以通过以下方式实现：

将视图封装更改为无：

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

更改工具提示中处理空格的方式：

.tooltip {
  white-space: pre;
}

使用 css ::first-line选择器在第一行执行所需的任何格式：

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