网站搜索

angular - 如何向 PrimeNG 工具提示添加图片


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

错误类型 'TemplateRef' 不能分配给类型 'string'

有没有办法添加图片

答案#1

似乎这是在 GitHub 上讨论的话题。所以至少目前模板不支持工具提示。但我发现了这个 评论:上面写道:

将 escape 设置为 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

答案#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"