1. Components
  2. Clipboard

Components

Tailwind CSS Clipboard

Clipboard components are tools designed to facilitate the copying and pasting of data within an application. They ensure seamless data transfer and storage, enhancing user efficiency and interaction.

Requires JS

Note that this component requires the use of the third-party Clipboard plugin.

Learn more

How to use

  1. Install Clipboard

    Install clipboard via npm 

    npm i clipboard

  2. Add the Clipboard JavaScript

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

    <script src="./node_modules/clipboard/dist/clipboard.min.js"></script>

  3. Add the Clipboard JavaScript

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

                        
                      <script>
                        // INITIALIZATION OF CLIPBOARD
                        // =======================================================
                        (function() {
                          window.addEventListener('load', () => {
                            const $clipboards = document.querySelectorAll('.js-clipboard');
                            $clipboards.forEach((el) => {
                              const isToggleTooltip = HSStaticMethods.getClassProperty(el, '--is-toggle-tooltip') === 'false' ? false : true;
                              const clipboard = new ClipboardJS(el, {
                                text: (trigger) => {
                                  const clipboardText = trigger.dataset.clipboardText;
                                  
                                  if (clipboardText) return clipboardText;
                                  
                                  const clipboardTarget = trigger.dataset.clipboardTarget;
                                  const $element = document.querySelector(clipboardTarget);
                                  
                                  if (
                                    $element.tagName === 'SELECT'
                                    || $element.tagName === 'INPUT'
                                    || $element.tagName === 'TEXTAREA'
                                  ) return $element.value
                                  else return $element.textContent;
                                }
                              });
                              clipboard.on('success', () => {
                                const $default = el.querySelector('.js-clipboard-default');
                                const $success = el.querySelector('.js-clipboard-success');
                                const $successText = el.querySelector('.js-clipboard-success-text');
                                const successText = el.dataset.clipboardSuccessText || '';
                                const tooltip = el.closest('.hs-tooltip');
                                const $tooltip = HSTooltip.getInstance(tooltip, true);
                                let oldSuccessText;
                                
                                if ($successText) {
                                  oldSuccessText = $successText.textContent
                                  $successText.textContent = successText
                                }
                                if ($default && $success) {
                                  $default.style.display = 'none'
                                  $success.style.display = 'block'
                                }
                                if (tooltip && isToggleTooltip) HSTooltip.show(tooltip);
                                if (tooltip && !isToggleTooltip) $tooltip.element.popperInstance.update();
                                
                                setTimeout(function () {
                                  if ($successText && oldSuccessText) $successText.textContent = oldSuccessText;
                                  if (tooltip && isToggleTooltip) HSTooltip.hide(tooltip);
                                  if (tooltip && !isToggleTooltip) $tooltip.element.popperInstance.update();
                                  if ($default && $success) {
                                    $success.style.display = '';
                                    $default.style.display = '';
                                  }
                                }, 800);
                              });
                            });
                          })
                        })()
                      </script>

Basic usage

Basic usage of Clipboard with text.

npm install preline

Copy from Input

Copy input text to clipboard.

Tooltip examples

Tooltip example that shows the success message only.

Tooltip example how to change the text.

Modal example of Clipboard.