需要多行工具提示

Question

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

Answer 1

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

tooltipStyleClass | string | null | Style class of the tooltip.

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

Answer 2

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

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

Answer 3

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

component.html:

[pTooltip]="multiLineTooltip"

component.ts:

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

结果：

Checkout this simple StackBlitz project to see this in action

Need the multiline tooltip