• third party plugins
  • Clipboard

third party plugins

Tailwind CSS Clipboard

Clipboard components are vital tools that simplify data copying and pasting in applications, boosting user efficiency and enhancing overall interaction.

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate Clipboard JS into your project for efficient text copying functionality.

  • 1
    Step 1: Install Clipboard.js

    Install clipboard via npm.

    npm i clipboard
  • 2
    Step 2: Include Clipboard.js in Your Page

    To integrate Clipboard.js, add the following <script> tag near the end of your </body> section.

    <script src="../path/to/clipboard/dist/clipboard.min.js"></script>
    Since no custom CSS overrides are required, you can also use a CDN link.

    Include the following <script> tag near the end of your </body> section:

    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>

    Alternatively, choose from a variety of CDN providers listed here .

  • 3
    Step 3: Initialize Clipboard.js

    This JavaScript applies to all the examples shown below, so make sure to include it.

    For more options and configurations, refer to the Clipboard.js documentation .

    // Initialize Clipboard.js
(function () {
  window.addEventListener('load', () => {
    const clipboards = document.querySelectorAll('.copy-clipboard');

    clipboards.forEach(el => {
      const isToggleTooltip = HSStaticMethods.getClassProperty(el, '--is-toggle-tooltip') !== 'false';

      const clipboard = new ClipboardJS(el, {
        text: trigger => {
          const clipboardText = trigger.dataset.clipboardText;
          if (clipboardText) return clipboardText;

          const clipboardTarget = trigger.dataset.clipboardTarget;
          const targetElement = document.querySelector(clipboardTarget);

          return (targetElement.tagName === 'SELECT' || targetElement.tagName === 'INPUT' || targetElement.tagName === 'TEXTAREA')
            ? targetElement.value
            : targetElement.textContent;
        }
      });

      clipboard.on('success', () => {
        const defaultElement = el.querySelector('.copy-clipboard-default');
        const successElement = el.querySelector('.copy-clipboard-success');
        const successTextElement = el.querySelector('.copy-clipboard-success-text');
        const successText = el.dataset.clipboardSuccessText || '';
        const tooltip = el.closest('.tooltip');
        const tooltipInstance = HSTooltip.getInstance(tooltip, true);
        let oldSuccessText;

        if (successTextElement) {
          oldSuccessText = successTextElement.textContent;
          successTextElement.textContent = successText;
        }

        if (defaultElement && successElement) {
          defaultElement.style.display = 'none';
          successElement.style.display = 'block';
        }
        if (tooltip && isToggleTooltip) HSTooltip.show(tooltip);
        if (tooltip && !isToggleTooltip) tooltipInstance.element.popperInstance.update();
        setTimeout(() => {
          if (successTextElement && oldSuccessText) successTextElement.textContent = oldSuccessText;
          if (tooltip && isToggleTooltip) HSTooltip.hide(tooltip);
          if (tooltip && !isToggleTooltip) tooltipInstance.element.popperInstance.update();
          if (defaultElement && successElement) {
            successElement.style.display = '';
            defaultElement.style.display = '';
          }
        }, 3000);
      });
    });

});
})();

Basic example

Default

To copy text from a specific element, target it using its Id and assign it to the data-clipboard-target attribute in the trigger button. Additionally, set the value of the data-clipboard-action attribute to copy. This setup ensures that clicking the button will copy the text from the targeted element to the clipboard.

The following example demonstrates the default usage of the copy clipboard component.

Illustrations

Copy from input

Use the copy-clipboard-success-text component class to display default text, and set the value of the data attribute data-clipboard-success-text to specify the text that should appear after the content is successfully copied to the clipboard.

Below example showcases how to utilize the copy clipboard component with an input field.

With input group

Below example showcases how to utilize the copy clipboard component with an input group.

With tooltip

Below examples showcases how to utilize the copy clipboard functionality with tooltips.

With success message only

The example below illustrates the use of the copy clipboard component along with a tooltip displaying a static success message only.

With dynamic success message

The example below illustrates the use of the copy clipboard component along with a tooltip displaying a dynamic success message.

Extended clipboard with tooltip

Below is an example demonstrating the extended functionality of the copy clipboard component. It includes a centered tooltip that dynamically displays a success message. This setup enables copying by clicking anywhere within the element.

In modals

The example below illustrates the use of the copy clipboard component in modals.

Copy source code block

The example below illustrates the use of the copy clipboard component in source code block.