Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Template support for Tooltip #3496

Closed
tbetous opened this issue Jul 24, 2017 · 22 comments · Fixed by #12805
Closed

Template support for Tooltip #3496

tbetous opened this issue Jul 24, 2017 · 22 comments · Fixed by #12805
Labels
Type: New Feature Issue contains a new feature or new component request
Milestone

Comments

@tbetous
Copy link

tbetous commented Jul 24, 2017

[x] bug report
[x] feature request 
[ ] support request 

I am currently using pTooltip and before that I used tooltip from ngx-bootstrap. I used to make templates and used them in my tooltip like this :

<i class="fa fa-circle text-default" aria-hidden="true" [pTooltip]="defaultTooltip" tooltipPosition="top">
<ng-template #defaultTooltip>
    Something to display
</template>

Here it displays [Object object]. I wonder if it is possible to display what is actually inside my template.

@cagataycivici
Copy link
Member

This is not supported, changing the title according to it.

@cagataycivici cagataycivici changed the title pTooltip does not display template from ng-template Template support for Tooltip Aug 23, 2017
@cagataycivici cagataycivici added this to the 4.2 milestone Aug 23, 2017
@cagataycivici cagataycivici modified the milestones: 4.3, 4.2 Sep 11, 2017
@MrBlaise
Copy link

I would love this feature as well.

@cagataycivici cagataycivici removed this from the 4.2.3 milestone Oct 19, 2017
@cagataycivici cagataycivici added the Type: New Feature Issue contains a new feature or new component request label Oct 19, 2017
@pabloaccorinti
Copy link

+1

4 similar comments
@djagielo
Copy link

djagielo commented Jul 2, 2018

+1

@madvlad
Copy link

madvlad commented Sep 26, 2018

+1

@madvlad
Copy link

madvlad commented Oct 9, 2018

+1

@danailvidev
Copy link

+1

@speti43
Copy link

speti43 commented Aug 13, 2019

Set escape to false, and it will render html:
<div pTooltip="Some text <br> next line" tooltipPosition="top" [escape]="false"></div>

Docs:
http://primefaces.org/primeng/#/tooltip

@KevinHetzelGFL
Copy link

+1

@FabienDehopre
Copy link

Set escape to false, and it will render html:
<div pTooltip="Some text <br> next line" tooltipPosition="top" [escape]="false"></div>

Docs:
http://primefaces.org/primeng/#/tooltip

This won't work if your tooltip contains an *ngIf or *ngFor. It would be great if pTooltip can accept a template reference.

@noamyg
Copy link

noamyg commented Oct 19, 2021

+1

@eXpertise7
Copy link

@speti43 it does work, what you have written, but it won't apply css class next to HTML element

PrimeNG please consider doing it in the future

@Ccappuccino
Copy link

+1

3 similar comments
@yokrysty
Copy link

+1

@Silvest89
Copy link

+1

@ThoSap
Copy link
Contributor

ThoSap commented Jun 14, 2022

+1

@mertsincan
Copy link
Member

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

@stephanebouget
Copy link

Hi,
just tested on fresh 14.2.2 release
The enhancement has not been made.

We need to add dynamic components into the ptooltip component.
With the "escape" parameter to false, basic html is just transcribed.

For instance, in my case, i need to add a custom component into the tooltip, like that :
image

but it's just "pasted" into the tooltip.

@mertsincan is it possible to reopen the issue ?

@mertsincan mertsincan reopened this Nov 16, 2022
@github-actions github-actions bot added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 16, 2022
@ThoSap
Copy link
Contributor

ThoSap commented Nov 27, 2022

+1

@stephanie-dm
Copy link

I used the overlayPanel component as an alternative for pTooltip and it does have template support.

@JacobSiegle
Copy link
Contributor

Trying to port from https://ng-bootstrap.github.io/#/components/tooltip/api and the template support is def a nice feature to have

@kyjus25
Copy link
Contributor

kyjus25 commented Mar 23, 2023

PR Updated and ready to merge!

@mertsincan mertsincan removed the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Aug 21, 2023
@mertsincan mertsincan added this to the 16.2.1 milestone Aug 21, 2023
mertsincan pushed a commit that referenced this issue Aug 21, 2023
* Tooltip optionally take a TemplateRef

* Working!

* Use content variable

* Add template documentation

* Update prop docs

* Change to const

* Run code formatting

* Remove duplicate CommonModule

* Remove propsdoc

* Run apidoc

* ChangeDetectorRef not actually being used

* Call this just template now

* changeDetector not being used

---------

Co-authored-by: Justin White <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: New Feature Issue contains a new feature or new component request
Projects
None yet
Development

Successfully merging a pull request may close this issue.