angular 2 材质 matTooltip 多线

Question

我是 Angular 2 Material 的新手。 使工具提示多行的首选方法是什么？

例如，我可能有以下工具提示：

AA BBBBBBBBBB CCCC DDDDD

而且，我可能想让它以这样的多行格式显示：

AA BBBBBBBBBB 
CCCC 
DDDDD

Answer 1

首先，为您的工具提示创建一个类，使其在换行符处换行。

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

然后，将该类添加到您的工具提示中并插入带有 Unicode 代码换行符

<span 
    matTooltip="First line&#13;Second line"
    matTooltipClass="my-tooltip">
</span>

Answer 2

你甚至可以在不需要 \\n 或
只需按原样编写您的内容，例如：

" abc
  abc
  abc "

如果你需要它是多行的

你需要做的就是

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

将上述内容添加到您的 css 中

更新:: 2021

如@bsplosion 在评论中指出的那样，上述解决方案已经很老了，::ng-deep 已被弃用。 您可以在全局样式表中编写上述 css。 取决于您放置全局的位置。

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

如果您不想像之前的rodris解决方案那样使用上述方式，则可以直接添加该类。

<span 
    matTooltip="First line&#13;Second line"
    [matTooltipClass]="'my-tooltip'">
</span>

Answer 3

在我的示例中，我使用的是 angular 6，Material Design。 我的问题是“我有字符串数组”，我必须在多行 MatTooltip 中显示它。 我处理这种情况，它对我有用。 这是代码

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

 <p matTooltip="{{myArray.join('\\n')}}" >...</p>

Answer 4

在我的项目中，这些都不适合我，即使用 angular 7,8 我找到了解决方案
这里演示

在 html 中

<img src="assets/icons/about.png"  width="15px" height="15px" matTooltip="{{getMoreInformation()}}"  matTooltipClass="test"/>

在 ts 文件中

 getMoreInformation(): string {
    return 'Address : Home \n  Tel : Number';// \n represent break line here
    }

在你的 style.css 文件中（记住项目 style.css）

.test {
    white-space: pre-line;
  }

希望它可以帮助某人。 ps继续编码

Answer 5

你可以简单地做：

HTML :

<button matTooltip="AA BBBBBBBBBB 
   CCCC 
   DDDDD">
   Hello world !
</button>

CSS :

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

结果：

Answer 6

您可以使用ng-deep设置工具提示样式：

::ng-deep .mat-tooltip  {
    max-width: 60px !important; // for example
}