How to add copy-to-clipboard button to popups?

[spaceunifyfifty]

When I hover over error diagnostics to trigger popups in most languages, I can see that there's a copy to clipboard button in the pop-up that you can click on which copies the error message to your clipboard automatically.

I'm playing around with making my own extension and I'm triggering a pop-up when hovering over terms, but I'm not seeing any copy paste button. Is there a reference in the API that says how to add this to my own pop-ups?

[alefragnani]

Hi @spaceunifyfifty ,

When dealing with Diagnostics (createDiagnosticCollection API), it seems the UI already provides a Copy button in the top right corner of the hover. Which makes sense, since you may use the button to look for the diagnostic on external sources. So,_ if you are using the Diagnostics API, I would assume your diagnostic should be presented with the same Copy button, because the idea of the API is your extension providing the diagnostic "details" only like the message, severity, and latter some code action, and so on.

On the other hand, if you using another API, like the Hovers(provideHover API), it doesn't seems the UI provides the same Copy button, so I suppose this is not supported today. In this case, I would suggest you to open a feature request in the VS Code repo, so the team could take a look.

In the meantime, since the hover contents can be a MarkdownString, you could play with it and provide your own copy to clipboard button/link/img.

Hope this helps

[kevinramharak]

If you are looking for an example on how to implement a custom copy button with the hover API, check out pretty-ts-errors implementation. It's not as fancy, as the MarkdownString passed to the hover API is very limited in html and css because of its sanitization, but it should show you a working example.