Basic usage
The below example adds a clipboard button with default styling provided by the default stylesheet (clipboard.css).
clipboard('#example-1');
Advanced usage
The below example makes use of the options parameter to add a custom template which uses Bootstrap for styling and Bootstrap Icons for button content. It also makes use of the callback parameter to add a callback function with events that add Bootstrap Tooltips and change the tooltip text and button icon when the button is clicked.
clipboard('#example-2', {
template: '<div class="position-relative float-end w-100 d-none d-md-block"><button class="position-absolute top-0 end-0 mt-3 me-3 d-block btn btn-sm btn-outline-primary" type="button" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Copy to clipboard"><i class="bi-clipboard"></i></button></div>'
}, function(clipboard, element) {
let button = clipboard.querySelector('button');
let tooltip = new bootstrap.Tooltip(button);
button.addEventListener('click', function() {
tooltip.setContent({
'.tooltip-inner': 'Copied!'
});
button.innerHTML = '<i class="bi-check-lg"></i>';
});
button.addEventListener('mouseleave', function() {
tooltip.setContent({
'.tooltip-inner': 'Copy to clipboard'
});
button.innerHTML = '<i class="bi-clipboard"></i>';
});
});