Copying text to the clipboard is a common requirement in modern web applications. While many vanilla JavaScript solutions exist, today we’ll use Clipboard.js , a lightweight library, and Hint.css , a simple tooltip library, to create an elegant copy-to-clipboard feature.

Step 1: HTML Structure

The HTML remains the same. It includes a link styled with Hint.css to show a tooltip when hovering over the copy icon.

<a href="#" class="app-clipboard-link hint hint-bottom" data-hint="Copy link to clipboard">
    <i class="ti ti-copy"></i>
</a>

• class="hint hint-bottom" : Adds a bottom-aligned tooltip using Hint.css.
• data-hint="Copy link to clipboard" : The tooltip text.

Step 2: JavaScript

Here’s the updated code in plain JavaScript:

// Select the clipboard control
const control = document.querySelector('.app-clipboard-link');

// Set the clipboard text
control.setAttribute('data-clipboard-text', 'https://google.com');

// Initialize Clipboard.js
const clipboard = new ClipboardJS(control, {
    text: (trigger) => trigger.getAttribute('data-clipboard-text'),
});

// Handle the success event
clipboard.on('success', (event) => {
    // Update the tooltip to show "Copied"
    control.setAttribute('data-hint', 'Copied');

    // Reset the tooltip after 3 seconds
    setTimeout(() => {
        control.setAttribute('data-hint', 'Copy link to clipboard');
    }, 3000);
});

2254+ FREE RESOURCES FOR DEVELOPERS!! ❤️ 😍🥳 _{(updated daily)}

1400+ Free HTML Templates

372+ Free News Articles

72+ Free AI Prompts

333+ Free Code Libraries

52+ Free Code Snippets & Boilerplates for Node, Nuxt, Vue, and more!

25+ Free Open Source Icon Libraries

Visit dailysandbox.pro for free access to a treasure trove of resources!

Explanation of the Code

• This sets the data-clipboard-text attribute dynamically to the desired URL.
• text: Defines a callback function that returns the value of the data-clipboard-text attribute for the clicked element.
• Updates the tooltip to "Copied" when the clipboard action is successful.
• Resets the tooltip text back to "Copy link to clipboard" after 3 seconds.

Handling the Success Event :

clipboard.on('success', (event) => {
    control.setAttribute('data-hint', 'Copied');
    setTimeout(() => {
        control.setAttribute('data-hint', 'Copy link to clipboard');
    }, 3000);
});

Initializing Clipboard.js :

const clipboard = new ClipboardJS(control, {
    text: (trigger) => trigger.getAttribute('data-clipboard-text'),
});

Setting the Clipboard Text :

control.setAttribute('data-clipboard-text', 'https://google.com');

Advantages of This Approach

1. No jQuery Dependency : By using plain JavaScript, the solution is lightweight and compatible with modern web standards.
2. Hint.css Integration : Provides a clean, visually appealing tooltip without additional JavaScript.
3. Clipboard.js Simplicity : Handles clipboard interactions efficiently without requiring custom logic.

Conclusion

With just a few lines of plain JavaScript and the power of Clipboard.js and Hint.css, you’ve implemented a clean, user-friendly copy-to-clipboard feature. This approach avoids unnecessary dependencies while maintaining functionality and elegance.

Now, go ahead and try it out! Your users will appreciate the simplicity and responsiveness of this feature. 🚀

For more tips on web development, check out DailySandbox and sign up for our free newsletter to stay ahead of the curve!