需要多行工具提示

Question

我正在开发Angular 4 + PrimeNG的小项目。对ToolTip的一个组件不满意，需要一个多行工具提示。谁遇到过这样的问题以及如何克服这种情况？感谢。

Answer 1

如果您参考他们的文档：https://www.primefaces.org/primeng/#/tooltip。您可以注意到可以在工具提示中添加自定义类。见

  

tooltipStyleClass |字符串| null |工具提示的样式类。

我相信您可以使用它来添加自己的类，然后应用您想要的任何样式。可能会删除固定的height，设置正确的white-space，调整position等。希望有所帮助。

Answer 2

将pTooltip绑定到组件中的变量，然后使用Template string为其分配值。就是这样！

---

component.html：

[pTooltip]="multiLineTooltip"

---

component.ts：

multiLineTooltip = `line 1
  line 2
  line 3
  ...
`;

---

结果：

  

签出这个简单的StackBlitz project来查看实际效果

Answer 3

默认情况下，工具提示值为文本。 将escape属性设置为false将启用转义符

<input type="text" pTooltip="Line 1 <br/>Line 2 <br/>Line 3"  [escape]="false">