I finally am able to finalize the code which makes the popup functionality works exactly how I want it to where it brings the following features:-
Copy to clipboard' tooltip displays upon hovering over the button;Vimium extension for Chromium browser. This extension allows users to open a link by typing the letter(s) associated with it;
F' key to open the link should it be associated with a URL. In this case however, it executes the 'copy' function followed by the popup set.Copied' message;The codes are as follows:-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
(function($) {
'use strict'
$(function() {
$('.clip').before('<button class="button-demo" data-clipboard-target><i class="copy icon"></i></button>')
$('[data-clipboard-target]')
.popup({
content: 'Copy to clipboard',
//variation: 'inverted',
position: 'left center',
})
var clipboard = new ClipboardJS('[data-clipboard-target]', {
target: function(trigger) {
return trigger.nextElementSibling;
}
})
clipboard.on('success', function(e) {
e.clearSelection();
$(e.trigger)
.attr('title', 'Copied')
.popup('fixTitle')
.popup({
onCreate: function() {
$(e.trigger)
.popup({
//variation: 'inverted',
position: 'left center',
})
.popup('toggle');
}
})
.popup('show')
.attr('title', 'Copy to clipboard')
.popup('fixTitle')
.popup('show')
})
clipboard.on('error', function(e) {
$(e.trigger)
.attr('title', 'Please copy manually')
.popup('fixTitle')
.popup({
onCreate: function() {
$(e.trigger)
.popup({
//variation: 'inverted',
position: 'left center',
})
.popup('toggle');
}
})
.popup('show')
.attr('title', 'Copy to clipboard')
.popup('fixTitle')
.popup('show')
})
})
}(jQuery))
</script><div class="clip clip-demo">
"Lorem ipsum dolor sit amet."
</div>
<div class="clip clip-demo" contenteditable="true">
https://wraihan.com
</div><link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
/* CUSTOM CSS */
.clip-demo {
font-size: 95%;
padding: .5em;
display: flex;
line-height: normal;
width: auto;
margin: auto;
margin-bottom: 2em;
border: 1px solid #ccc;
border-radius: 2px;
}
.button-demo {
padding: .45em .25em .4em .3em;
color: #fff;
background: #008aa0;
border: 1px solid #eee;
border-radius: 2px;
float: right;
overflow: hidden;
}
