Clipboard

Basic usage

The below example adds a copy to 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(template, element) {
  let button = template.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>';
  });
});