角度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>

为什么不`'matTooltipClass ="my-tooltip"`而不是`[matTooltipClass] ="'my-tooltip'"`？ (5认同)
你知道为什么它的工作原理是这样的 `[matTooltip]="'I am goincrazy here'"` 但如果我有一个公共变量 `text = "I am goincrazy here"; 就不会这样工作了` 并将其设置为：`[matTooltip]="text"? 第一个示例创建新行，第二个示例仅打印出“”.. (4认同)
@displayname，我认为 CSS 样式在 Angular 评估变量之前运行。我只是在变量中的文本上使用 \n ，它就起作用了 (3认同)

Answer 2

您甚至可以不需要\ n
就可以实现相同的目的，也可以只写内容，例如：

“ abc abc abc”（如果需要多行显示）

您需要做的就是

    ::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

在我的项目中，这些都不适合我，即使用 angular 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

你可以简单地做：

HTML :

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

CSS :

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

结果：