角度2材料matTooltip多线

Question

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

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

AA BBBBBBBBBB CCCC DDDDD

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

AA BBBBBBBBBB 
CCCC 
DDDDD

Answer 1

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

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

然后，将该类添加到工具提示中，并使用代码


添加换行符

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

Answer 2

你可以在不需要\ n或者只需编写内容的情况下实现同样的目的，例如：

＆＃34; ABC   ABC   abc＆＃34;如果你需要它是多线的

您需要做的就是

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

将上述内容添加到您的css

Answer 3

在我的示例中，我使用的是角度6（材质设计）。我的问题是“我有字符串数组”，我必须在多行MatTooltip中显示它。我处理这种情况，对我来说很有效。这是代码

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

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

Answer 4

在我的项目中，没有一个对我有用，即我使用角度为7,8的解决方案
这里DEMO

以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

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

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

DEMO

Answer 6

您可以轻松地做到：

HTML ：

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

CSS ：

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

结果：