如何将图片添加到工具提示 PrimeNG答案

【问题标题】：How to add picture to tooltip PrimeNG如何将图片添加到工具提示 PrimeNG
【发布时间】：2022-01-07 02:20:03
【问题描述】：

<i [pTooltip]="picture" tooltipPosition="bottom" class="pi pi-images"></i> <ng-template #picture> <img src="" alt="here img"> </ng-template>

错误类型“TemplateRef”不可分配给类型“字符串”

有没有办法添加图片

【问题讨论】：

标签： angular typescript primeng

【解决方案1】：

似乎这是 GitHub 上的一个讨论主题。因此，工具提示至少目前不支持模板。但我发现了这个 comment：它说：

设置转义为false，它会渲染html：

<div pTooltip="Some text <br> next line" tooltipPosition="top" [escape]="false"></div>

这似乎适用于我尝试过的这个示例：

<p pTooltip="<img src='http://placekitten.com/g/100/200' />" [escape]="false">Hover me!</p>

DEMO STACKBLITZ

【讨论】：

你能告诉我如何改变这个 HTML 元素的样式吗？
查看文档，好像有tooltipStyleClass，您可以在其中定义自己的样式。检查文档primefaces.org/primeng/showcase/#/tooltip
谢谢。我这样做了，但它不起作用。
好的，对Primeng不是很熟悉，但听起来你可能需要使用::ng-deep .target-class-here {.....styles here....} 如果这不起作用，我建议为此打开一个新问题。
昨天我通过两种方式解决了这个问题。 HTML 属性宽度和高度。并通过:: ng-deep。感谢您的帮助。

【解决方案2】：

<i
pTooltip="<img class='cell-view-file__tooltip' src='{{cell.value}}' alt='{{fileName}}'/>"
[escape]="false"
appendTo="body"
class="pi pi-images"
tooltipPosition="bottom"
tooltipStyleClass="tooltip"

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。