Clipboard

A modern approach to copy text to clipboard

Clipboard.js documentation

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="./assets/vendor/clipboard/dist/clipboard.min.js"></script>
Copy

Copy-paste the following <script> near the end of your pages under JS Front to enable it.
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // INITIALIZATION OF CLIPBOARD
    // =======================================================
    $('.js-clipboard').each(function() {
      var clipboard = $.HSCore.components.HSClipboard.init(this);
    });
  });
</script>
Copy

Basic examples

Copy to Clipboard!
Cut to Clipboard! 
<!-- Clipboard -->
<div class="input-group mb-3">
  <input id="popoverExample1" type="text" class="form-control" value="I am a popover example">
  <div class="input-group-append">
    <a class="js-clipboard input-group-text bg-white" href="javascript:;" title="Copy to clipboard!" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="And here's some amazing content. It's very engaging. Right?"
       data-hs-clipboard-options='{
         "type": "popover",
         "successText": "Copied!",
         "contentTarget": "#popoverExample1"
       }'>
      <i class="fas fa-copy"></i>
    </a>
  </div>
</div>
<!-- End Clipboard -->

<!-- Clipboard -->
<div class="input-group mb-3">
  <input id="tooltipExample1" type="text" class="form-control" value="I am a tooltip example">
  <div class="input-group-append">
    <a class="js-clipboard input-group-text bg-white" href="javascript:;" data-toggle="tooltip" title="Copy to clipboard!"
       data-hs-clipboard-options='{
         "type": "tooltip",
         "successText": "Copied!",
         "contentTarget": "#tooltipExample1"
       }'>
      <i class="fas fa-copy"></i>
    </a>
  </div>
</div>
<!-- End Clipboard -->

<!-- Clipboard -->
<div class="input-group mb-3">
  <input id="iconExample" type="text" class="form-control" value="I am an icon example">
  <div class="input-group-append">
    <a class="js-clipboard input-group-text bg-white" href="javascript:;"
       data-hs-clipboard-options='{
        "contentTarget": "#iconExample",
        "classChangeTarget": "#iconExampleLinkIcon",
        "defaultClass": "fas fa-copy",
        "successClass": "fas fa-check"
       }'>
      <span id="iconExampleLinkIcon" class="fas fa-copy"></span>
    </a>
  </div>
</div>
<!-- End Clipboard -->

<!-- Clipboard -->
<div class="input-group mb-3">
  <input id="textExample" type="text" class="form-control" value="I am a text example">
  <div class="input-group-append">
    <a class="js-clipboard input-group-text bg-white" href="javascript:;"
       data-hs-clipboard-options='{
         "contentTarget": "#textExample",
         "successText": "Copied!"
       }'>Copy to Clipboard!</a>
  </div>
</div>
<!-- End Clipboard -->

<!-- Clipboard -->
<div class="input-group mb-4">
  <input id="cutExample" type="text" class="form-control" value="I am a text cut example">
  <div class="input-group-append">
    <a class="js-clipboard input-group-text bg-white" href="javascript:;"
       data-hs-clipboard-options='{
         "action": "cut",
         "contentTarget": "#cutExample",
         "successText": "Cut!"
       }'>Cut to Clipboard!</a>
  </div>
</div>
<!-- End Clipboard -->

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Clipboard in modal
</button>
<!-- End Button trigger modal -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <svg aria-hidden="true" class="mb-0" width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
            <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
          </svg>
        </button>
      </div>
      <div class="modal-body">
        <!-- Clipboard -->
        <div class="input-group mb-4">
          <input id="modalExample" type="text" class="form-control" value="I am a modal example" readonly>
          <div class="input-group-append">
            <a class="js-clipboard input-group-text" href="javascript:;" data-toggle="tooltip" title="Copy to clipboard!"
               data-hs-clipboard-options='{
                 "type": "tooltip",
                 "successText": "Copied!",
                 "contentTarget": "#modalExample",
                 "container": "#exampleModal"
               }'>
              <i class="fas fa-copy"></i>
            </a>
          </div>
        </div>
        <!-- End Clipboard -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<!-- End Modal -->
Copy

JavaScript behavior

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // INITIALIZATION OF CLIPBOARD
    // =======================================================
    $('.js-clipboard').each(function() {
      var clipboard = $.HSCore.components.HSClipboard.init(this);

      clipboard.on('success', function() {
       console.log('Copied!!!');
      });
    });
  });
</script>
Copy

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-clipboard-options='{
   ...

   // Custom
   "type": null,
   "contentTarget": "tooltip",
   "classChangeTarget": "#ID",
   "defaultClass": "test1 test2",
   "successText": "Copied!",
   "successClass": "test1 test2"
}' - array
Copy

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-clipboard-options='{}'. For more detailed or missing attributes/functions, see the official Clipboard.js documentation page.

Parameters Description Default value

type

 One of three types: tooltip, popover, default null

contentTarget

 Selector whose value/markup will be copied to the buffer null

classChangeTarget

 Selector whose class will change after successful copy to buffer null

defaultClass

 Classes that should be passed to the element specified in classChangeTarget, after some delay (800ms) null

successText

 Classes that should be passed to the element specified in classChangeTarget, immediately after successful copying to the memory buffer null

successClass

 The text with which the default will be replaced for the element specified in classChangeTarget, immediately after successful copying to the memory buffer. It will also be changed to default after some delay (800ms) null