The Divi Code Snippet module lets you display syntax highlighted source code within your Divi Builder pages. If you'd like to include a "Copy Code to Clipboard" button to allow users to quickly and easily copy your code samples, you can do it by setting:
Code Snippet Settings > Code Snippet > Copy-to-Clipboard Button = Yes
Like so:
You can optional also set the tooltip text displayed when the user hovers over the copy-to-clipboard button.
Here's how the copy button looks on the front-end (with hover tooltip shown):
Add Text Next to the Copy-to-Clipboard Button
If you'd like to add text next to the button, you can do so with some CSS like so:
.dbcs-clipboard-button:after {
content: 'Copy';
font-family: arial;
margin-left: 10px;
}
Hello, the copy function does not work… I've enabled the button, set the tooltip but when I click on it, nothing happens. Nothing is getting copied.
Hey Alexandra, sorry to hear it's not working for you. Are you able to share a link to an example page? It's currently working on my test sites so I'm not sure yet what would be preventing it from working on yours. I should be able to tell you more once I've taken a look at it. Thanks!
Hi Dan,
yes. It's on my staging-area on a testing blogpost.
https://staging.cca-media.at/glass-morphism-in-divi-so-erreichst-du-den-blur-effekt-als-hintergrund/
Thanks Alexandra, it looks like you have a performance plugin set up to defer loading of the jQuery, which is making jQuery unavailable at the time the copy to clipboard feature tries to use it. Are you able to tell me which performance plugin(s) you're using so that I can do some testing and figure out the best way to deal with this? Thanks!
Hello Dan! Thanks for the heads-up. I have just resolved the issue by going to Divi's Theme Options / Performance and disabling the "Defer jQuery and jQuery Migrate" option. :)
Hey Alexandra, thanks for letting me know! It looks like it was only happening when "Defer jQuery and jQuery Migrate" was enabled AND "Enqueue jQuery Compatibility Script" was disabled. I've just released an update (v1.4.4) that should fix this an allow the copy-to-clipboard button to work even if jQuery is deferred and the compatibility script is disabled. That should let you keep using the defer jQuery option if you wish. Thanks again!