Bootstrap Clipboard | Nova - Responsive WebApp UI Kit

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 Nova to enable it.

<script src="../../assets/js/components/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
    $.HSCore.components.HSClipboard.init('.js-clipboard');
  });
</script>

<div class="input-group">
  <input type="text" id="basic-example-field" class="form-control" value="https://htmlstream.com">
  <div class="input-group-append">
    <a class="js-clipboard input-group-text" href="javascript:;"
      data-clipboard-target="#basic-example-field">
    <span class="nova-layers"></span>
    </a>
  </div>
</div>

With tooltip

Result
HTML

<div class="input-group">
  <input type="text" id="tooltipExample" class="form-control" value="I am a tooltip example" readonly>
  <div class="input-group-append">
    <a class="js-clipboard input-group-text" href="javascript:;"
       data-toggle="tooltip"
       title="Copy to clipboard!"
       data-type="tooltip"
       data-success-text="Copied!"
       data-content-target="#tooltipExample">
      <span class="nova-layers"></span>
    </a>
  </div>
</div>

With change icons

Result
HTML

<div class="input-group">
  <input type="text" id="iconExample" class="form-control" value="I am an icon example" readonly>
  <div class="input-group-append">
    <a class="js-clipboard input-group-text" href="javascript:;"
       data-content-target="#iconExample"
       data-class-change-target="#linkIcon"
       data-default-class="nova-layers"
       data-success-class="nova-check">
      <span id="linkIcon" class="nova-layers"></span>
    </a>
  </div>
</div>

Cahnge text

Result
HTML

Copy to Clipboard!

<div class="input-group">
  <input type="text" id="textExample" class="form-control" value="I am a text example" readonly>
  <div class="input-group-append">
    <a class="js-clipboard btn btn-outline-primary" href="javascript:;"
       data-content-target="#textExample"
       data-success-text="Copied!">Copy to Clipboard!</a>
  </div>
</div>

Cut to clipboard

Result
HTML

<div class="form-group">
  <textarea id="cut-to-clipboard-field" class="form-control">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis.</textarea>
</div>

<button class="btn btn-primary js-clipboard"
           data-clipboard-action="cut"
           data-clipboard-target="#cut-to-clipboard-field">
  Cut to clipboard
</button>

Modal

Result
HTML

<!-- Modal Toggle -->
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#exampleModal">
  Open modal
</button>
<!-- End Modal Toggle -->

<!-- Clipboard 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">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    <div class="modal-body">
      <label>Copy text</label>
      <div class="input-group">
        <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-type="tooltip" data-success-text="Copied!"
             data-content-target="#modalExample"
             data-container="#exampleModal">
            <span class="nova-layers"></span>
          </a>
        </div>
      </div>
    </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 Clipboard Modal -->

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-controls="".

Attribute	Description
`data-content-target`	ID of the element from which the contents will be copied to the memory buffer.
`data-class-change-target`	ID element whose classes will be changed, specified in the `data-success-class`, after successfully copying to the memory buffer.
`data-default-class`	Classes that must be passed to the element specified in the `data-class-change-target`, after some delay (800ms).
`data-success-class`	The classes to be transferred to the element specified in the `data-class-change-target`, immediately after successfully copying to the memory buffer.
`data-success-text`	The text with which the default will be replaced by the element specified in `data-class-change-target`, immediately after successful copying to the memory buffer. And it will also be changed to default after some delay (800ms).

Clipboard

Official documentation