2

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

Error Type 'TemplateRef' is not assignable to type 'string'

Is there a way to add a picture

2 Answers 2

2

Seems this is a discussed topic on GitHub. So at least currently template is not supported for tooltip. But I found this comment: which says:

Set escape to false, and it will render html:

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

This seems to work fine with this sample I tried:

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

DEMO STACKBLITZ

5
  • Can you tell me how to change the style of this HTML element? Commented Nov 30, 2021 at 13:14
  • Looking at the documentation, seems like there is tooltipStyleClass where you can define your own styles. Check documentation primefaces.org/primeng/showcase/#/tooltip
    – AVJT82
    Commented Nov 30, 2021 at 13:27
  • Thanks. I did that and it doesn't work. Commented Nov 30, 2021 at 13:32
  • OK, not that familiar with Primeng, but sounds to me that you perhaps need to use ::ng-deep .target-class-here {.....styles here....} If that doesn't work, I would suggest to open a new question for that.
    – AVJT82
    Commented Nov 30, 2021 at 14:11
  • 1
    Yesterday I solved this problem in two ways. HTML attributes width and height. And through :: ng-deep. Thanks for the help. Commented Dec 1, 2021 at 10:19
0
<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"
1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Dec 1, 2021 at 10:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.