Copy Code To Clipboard Plugin –Code Box Copy is a lightweight and flexible jQuery syntax plugin that provides an easy-to-use and simple way to copy any text to the clipboard with one click.

This jQuery plugin for the favored Prism syntax highlighter means that you can copy the content material inside the code field to the clipboard with a customizable copy button.

Parameters

• tooltipText string | Default value: ‘Copied’ – Text of the tooltip when the user clicks the copy button.
• tooltipShowTime integer | Default value: 1000 – The time (in milliseconds) until the tooltip appears after the fade-in and before the fade-out.
• tooltipFadeInTime integer | Default value: 300 – The fade in time (in milliseconds) until the tooltip appears.
• tooltipFadeOutTime integer | Default value: 300 – The fade in time (in milliseconds) until the tooltip disappears,.

Must Read: Copy A Text String From An Input Element | angular-clipboard

How to make use of it:

<link href="/path/to/prism.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/prism.min.js"></script>
<script src="/path/to/clipboard.min.js"></script>

<link href="code-box-copy.css" rel="stylesheet">
<script src="code-box-copy.js"></script>

<div class="code-box-copy">
  <button class="code-box-copy__btn" data-clipboard-target="#example-html" title="Copy"></button>
  <pre><code class="language-html" id="example-html">&lt;div class=&quot;example&quot;&gt;
      Lorem ipsum
  &lt;/div&gt;</code></pre>
</div>

$('.code-box-copy').codeBoxCopy();

$('.code-box-copy').codeBoxCopy({
  tooltipText: 'Copied',
  tooltipShowTime: 1000,
  tooltipFadeInTime: 300,
  tooltipFadeOutTime: 300
});

See Demo And Download

Official Website(jablonczay): Click Here

This superior jQuery/javascript plugin is developed by jablonczay. For extra advanced usage, please go to the official website.