In today’s digital age, users often want the convenience of copying text or other content with a simple click. This can be incredibly useful in web applications and websites where sharing information quickly is crucial. In this article, we’ll explore how to implement a copy-to-clipboard functionality with tooltips using Bootstrap 5 and JavaScript.
Step 1: HTML Structure
To begin, let’s create the HTML structure for our copy-to-clipboard feature. In the below example, we have a paragraph (<p>) element with an ID of “copyText” and a button (<button>) with an ID of “copyButton.” Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="path/to/bootstrap.css" rel="stylesheet">
<script src="path/to/bootstrap.js"></script>
<title>Copy to Clipboard</title>
<script>
// JavaScript function to copy text to clipboard
function copyTextToClipboard(text, buttonId) {
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
document.body.removeChild(textArea);
// Update button text
const button = document.getElementById(buttonId);
button.textContent = "Copied!";
setTimeout(() => {
button.textContent = "Copy";
}, 1000); // Reset button text after 1 second
}
</script>
</head>
<body>
<div class="container mt-5">
<div class="row d-flex justify-content-center">
<div class="col-md-6">
<div class="card p-3 px-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="text-line me-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span>
<button onclick="copyTextToClipboard('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod','copy_button_1')" id="copy_button_1" class="btn btn-sm btn-success copy-button">Copy</button>
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="text-line me-2">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
<button onclick="copyTextToClipboard('Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.','copy_button_2')" id="copy_button_2" class="btn btn-sm btn-success copy-button">Copy</button>
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="text-line me-2">Duis aute irure dolor in reprehenderit in voluptate velit</span>
<button onclick="copyTextToClipboard('Duis aute irure dolor in reprehenderit in voluptate velit','copy_button_3')" id="copy_button_3" class="btn btn-sm btn-success copy-button">Copy</button>
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="text-line me-2">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</span>
<button onclick="copyTextToClipboard('Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.','copy_button_4')" id="copy_button_4" class="btn btn-sm btn-success copy-button">Copy</button>
</div>
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="text-line me-2">Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
<button onclick="copyTextToClipboard('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod','copy_button_5')" id="copy_button_5" class="btn btn-sm btn-success copy-button">Copy</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Step 2: Styling
This CSS code defines styles for a web page with a background color, customizes card elements, creates copy buttons with tooltips for copying text, and animates the appearance and disappearance of the tooltips when users click the copy buttons. The code also sets the text size for elements with the “text-line” class.
body {
background: #B9B4B4;
}
.card {
border: none;
height: 100%;
background: #ccb8b83d;
}
.copy-button {
height: 25px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: #213688c4; /* Set the background color for the buttons */
color: #fff; /* Set the text color to white for better contrast */
}
.tip {
background-color: grey;
padding: 0 14px;
line-height: 27px;
position: absolute;
border-radius: 4px;
z-index: 100;
font-size: 12px;
animation-name: tip;
animation-duration: 0.6s;
animation-fill-mode: both;
color: grey;
}
.tip:before {
content: "";
background-color: grey;
height: 10px;
width: 10px;
display: block;
position: absolute;
transform: rotate(45deg);
top: -4px;
left: 17px;
}
#copied_tip {
animation-name: come_and_leave;
animation-duration: 1s;
animation-fill-mode: both;
bottom: -35px;
left: 2px;
}
.text-line {
font-size: 12px;
}Step 3: JavaScript Implementation
Now, let’s add the JavaScript code to implement the copy-to-clipboard functionality and tooltips:
function copyToClipboard(text, targetId) {
// Remove the tooltip after a delay
setTimeout(function() {
$('#copied_tip').remove();
}, 800);
// Add the "Copied!" tooltip
$(targetId).append("<div class='tip' id='copied_tip'>Copied!</div>");
// Create a temporary input element to copy text to clipboard
var input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
// Execute the copy command and remove the input element
var success = document.execCommand('copy');
document.body.removeChild(input);
// Return the result of the copy operation (true if successful, false otherwise)
return success;
}Step 4: CDNs For Resources
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
Implementing Copy to Clipboard with Buttons and Tooltips Using Bootstrap 5 Demo
That’s it! You’ve successfully added a copy to clipboard feature with tooltips to your Bootstrap 5 web page. Users can now easily copy content with just a click, improving the user experience on your website.
