How to use
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../node_modules/clipboard/dist/clipboard.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins 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>
(function() {
// INITIALIZATION OF CLIPBOARD
// =======================================================
HSCore.components.HSClipboard.init('.js-clipboard')
})();
</script>
Tooltip example
<!-- Input Group -->
<div class="input-group input-group-merge">
<input type="text" id="tooltipExample" class="form-control" value="I am a tooltip example">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard!"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#tooltipExample"
}'>
<i class="bi-clipboard"></i>
</a>
</div>
<!-- End Input Group -->
Change icon
<!-- Input Group -->
<div class="input-group input-group-merge">
<input type="text" id="iconExample" class="form-control" value="I am an icon example">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;"
data-hs-clipboard-options='{
"contentTarget": "#iconExample",
"classChangeTarget": "#iconExampleLinkIcon",
"defaultClass": "bi-clipboard",
"successClass": "bi-check"
}'>
<i id="iconExampleLinkIcon" class="bi-clipboard"></i>
</a>
</div>
<!-- End Input Group -->
Cut to clipboard
Use action="cut"
<div class="mb-4">
<textarea id="cutExample" class="form-control">Cut text example in textarea.</textarea>
</div>
<button class="js-clipboard btn btn-primary" data-bs-toggle="tooltip" title="Copy to clipboard!"
data-hs-clipboard-options='{
"action": "cut",
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#cutExample"
}'>
Cut to clipboard
</button>
Modal example
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Open modal
</button>
<!-- End Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Copy to Clipboard</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Input Group -->
<div class="input-group input-group-merge">
<input type="text" id="modalExample" class="form-control" value="I am a modal example">
<a class="js-clipboard input-group-append input-group-text" href="javascript:;" data-bs-toggle="tooltip" title="Copy to clipboard!"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#modalExample",
"container": "#exampleModal"
}'>
<i class="bi-clipboard"></i>
</a>
</div>
<!-- End Input Group -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameters | Description | Default value |
|---|---|---|
type |
Callback type. | null |
contentTarget |
Content. | null |
classChangeTarget |
Class to be changed. | null |
defaultClass |
Default class for change target. | null |
successText |
Add text when copy to clipboard is success. | null |
successClass |
Add class when copy to clipboard is success. | null |
originalTitle |
Default title for tooltip. | null |