【问题标题】: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
    猜你喜欢
    • 2017-08-03
    • 1970-01-01
    • 2021-04-03
    • 1970-01-01
    • 2011-06-06
    • 2010-11-12
    • 1970-01-01
    • 2015-09-28
    相关资源
    最近更新 更多