Clipboard

Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load, check out documentation.

Example 1

Use with input groups.

														
<form>
	<div class="form-group">
		<div class="input-group">
			<input id="clip_1" type="text" class="form-control font-weight-500" value="HDFCNOW20" aria-label="Text input with dropdown button">
			<button class="btn btn-primary copy-to-clipboard" data-clipboard-target="#clip_1" type="button">Copy Code</button>
		</div>
	</div>
	<div class="form-group">
		<div class="input-group">
			<input id="clip_2" type="text" class="form-control font-weight-500" value="https://hencework.com" aria-label="Text input with dropdown button">
			<button class="btn btn-primary copy-to-clipboard"  data-clipboard-target="#clip_2" type="button">Copy Link</button>
		</div>
	</div>
</form>

														
<!-- Clipboard JS -->
<script src="vendors/clipboard/dist/clipboard.min.js"></script>

/*Clipboard Init*/
var clipboard = new ClipboardJS('.copy-to-clipboard');

clipboard.on('success', function(a) {
	var b = bootstrap.Tooltip.getInstance(a.trigger);
	a.trigger.setAttribute('data-bs-original-title', 'Copied!'), b.show(), a.trigger.setAttribute('data-bs-original-title', 'Copy to clipboard'), a.clearSelection()
});

clipboard.on('error', function(a) {
	var b = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-',
		c = 'Press ' + b + 'C to copy',
		d = bootstrap.Tooltip.getInstance(a.trigger);
	a.trigger.setAttribute('data-bs-original-title', c), d.show(), a.trigger.setAttribute('data-bs-original-title', 'Copy to clipboard')
});

Example 2

Use with code blocks.

														
<div>
	...
</div>

														
<div class="hk-code-block">
	<button class="btn btn-icon btn-xs btn-flush-light btn-rounded flush-soft-hover" data-clipboard-snippet><span class="btn-icon-wrap"><span class="feather-icon"><i data-feather="copy"></i></span></span></button>
	<pre class="language-markup">
		<code class="language-markup">
		...
		</code>
	</pre>
</div>

														
/*Clipboard for Codeblock Init*/
var clipboardSnippets = new ClipboardJS('[data-clipboard-snippet]', {
	target: function(trigger) {
		return trigger.nextElementSibling;
	}
});
document.querySelectorAll('.copy-to-clipboard,[data-clipboard-snippet]').forEach(function(a) {
	var b = new bootstrap.Tooltip(a,{
		title: 'Copy to clipboard',
		placement: 'top'
	});
	a.addEventListener('mouseleave', function() {
		b.hide();
	})
});
clipboardSnippets.on('success', function(a) {
	var b = bootstrap.Tooltip.getInstance(a.trigger);
	a.trigger.setAttribute('data-bs-original-title', 'Copied!'), b.show(), a.trigger.setAttribute('data-bs-original-title', 'Copy to clipboard'), a.clearSelection()
});
clipboardSnippets.on('error', function(a) {
	var b = /mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-',
		c = 'Press ' + b + 'C to copy',
		d = bootstrap.Tooltip.getInstance(a.trigger);
	a.trigger.setAttribute('data-bs-original-title', c), d.show(), a.trigger.setAttribute('data-bs-original-title', 'Copy to clipboard')
});

Example 1
Example 2