Question

我在项目中使用Angular材质工具提示。我想在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，您可以通过以下方式实现：

将视图封装更改为无：

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

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

.tooltip {
  white-space: pre;
}

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

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

仅在角度材料工具提示中将样式应用于第一行

1 个答案: