Add Floating Copy Buttons to Text Selections - jQuery Select Copy Button

Select Copy Button is a tiny jQuery plugin that allows users to grab text snippets from your web pages, like articles, documentation, or any block of text where they might want to copy portions.

Once users highlight any portion of text inside a specified DOM element, a small button appears next to the selection. Tapping or clicking the button copies the selection to the clipboard immediately, with optional visual feedback like a “Copied!” message. 

Features

• One-tap Copying: Utilizes the modern Clipboard API for efficient copying.
• Responsive Design: Works well on both mobile and desktop browsers.
• Simple Integration: You can attach it to pretty much any DOM element containing text.
• Styleable Button: You can customize the button's appearance and text labels.

How to use it:

1. Add the Select Copy Button plugin's JavaScript and CSS files to your web page.

<link rel="stylesheet" href="path/to/select-copy-plugin.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="path/to/jquery.select-copy-plugin.js"></script>

2. Initialize the plugin on any jQuery selector that wraps the text content you want to make selectable.

$(document).ready(function() {
  $('article').selectCopyButton();
});

3. Available options to customize the copy button.

• buttonText: The text displayed on the copy button initially.
• copiedText: The text displayed on the button after a successful copy.
• buttonClass: A custom CSS class applied to the button. This is useful for overriding default styles or applying new ones without editing the plugin's CSS directly.
• onSelect: A callback function that fires when text is selected within the target element. It receives the selected text string as an argument.

$('article').selectCopyButton({
  buttonText: 'Copy',
  copiedText: 'Copied!',
  buttonClass: 'scb-button',
  onSelect: null,
});

5. You can override the default button styles using CSS. The default class is .scb-button. If you specify a buttonClass in the options, use that class name in your CSS.

.scb-button {
  position: absolute;
  padding: 10px 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 9999;
  transition: opacity 0.2s ease;
}

.scb-button:active {
  background-color: #218838;
}

FAQs

Q: How do I change the offset or exact position of the button?
A: The button is positioned 10px below the selection by default (window.scrollY + rect.bottom + 10 + 'px'). To change this, you'd need to modify this line in the jquery.select-copy-plugin.js file. For minor adjustments, you could also use CSS transform: translateY(value) on your buttonClass, but for significant offset changes, editing the JS is more direct.

Q: Can I use this plugin on multiple, separate text containers on the same page?
A: Yes. Initialize it for each container. The plugin creates only one actual button element in the DOM, which is then reused and repositioned as needed when you select text within any of an initialized container.

Q: What happens if navigator.clipboard isn't available or fails? A: The plugin uses navigator.clipboard.writeText(). If this API is unavailable (older browsers) or the call fails (e.g., browser permissions, not in a secure context like HTTPS), the .catch() block in handleCopy will trigger an alert('Failed to copy: ' + err). For broader compatibility with very old browsers, you'd need a solution that falls back to the older document.execCommand('copy') method, but that comes with its own set of issues and is generally not recommended if navigator.clipboard is an option. This plugin sticks to the modern API.

Q: Does the onSelect callback fire even if the selected text is very short?
A: Yes, onSelect fires as long as selection.toString().trim() results in a non-empty string. It fires right before the button is positioned and shown.

Q: I have a sticky header. Does the button account for this when positioning?
A: The plugin positions the button based on rect.bottom (bottom of the selection) and window.scrollY. If you have a sticky header that an element could scroll under, the button's absolute positioning might place it under the header. You might need to adjust the top calculation in the plugin's source or ensure your sticky header's z-index is lower than the button's z-index (default 9999) if they overlap, or add a top margin/padding to your content area that matches the header height.

---

This awesome jQuery plugin is developed by avenart. For more Advanced Usages, please check the demo page or visit the official website.