Tooltip on click of a button

Question

I\'m using clipboard.js to copy some text from a textarea, and that\'s working fine, but I want to show a tooltip saying \"Copied!\" if it was successfully copi

Answer 1

CSS Only Solution

Githubs Primer tooltips is an excellent solution.

Usage:

npm install --save primer-tooltips

Copy the node_modules/primer-tooltips/build/build.css file to a convenient location and then link to it in your HTML. (Consider renaming it a more convenient name e.g. primer-tooltips.css). You'll have to edit the build.css file by commenting out the .tooltipped:hover::before,.tooltipped:hover::after, pseudo selectors to achieve the on click effect.

Assuming you have clipboardJS already set up, add the following attributes to your copy button:

copy

That's it!