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-paste the following <script> near the end of your pages under JS Front to enable it.

              
                <script src="../../assets/js/hs.clipboard.js"></script>
              
            

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>
              
            

Basic examples

                    
                      <!-- 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 -->
                    
                  

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>
              
            

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
              
            

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