How to implement an interactive tooltip in Angular

Question

I would like to have an interactive tooltip in my application - I have some pretty long names in a table - I want to display an on-hover tooltip with the full name. I want the tooltip to be clickable, so the user can click a button to copy the full name to the clipboard.

My application uses PrimeNg, however I tried some other tooltips - the problem is that I can't find a way to prevent the tooltip from hiding when the user moves the cursor from the paragraph onto the tooltip - mouseleave event fires. I didn't find any help in PrimeNg documentation.

Any suggestions how could I implement that from scratch in Angular?

Answer 1

Have a look to primeNg overlay panel.

This is an example