CODEWITHSUNDEEP
angulartypescriptprimeng
Maxim Zebzeev
Maxim Zebzeev

Reputation: 27

How to add picture to tooltip PrimeNG

<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

Upvotes: 2

Views: 3547

Answers (2)

Maxim Zebzeev
Maxim Zebzeev

Reputation: 27

<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"

Upvotes: 0

AVJT82
AVJT82

Reputation: 73357

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

Upvotes: 2

Related Questions