This is probably going to be the last entry posted before I go through a hectic phase as a mom to a newborn and a toddler.
I mentioned in one of my previous entries that it would be fun if there is a tooltip displayed following the click on a clipboard button that lets us copy text.
Please note though that I have no intention of using it as a replacement to my initial setting of showing the tooltips. The slightly-hacked-and-adopted codes I provided below just serves as an experiment for this particular purpose using clipboardjs, bootstrap tooltip component and jquery.
It displays a tooltip saying, “Copy to clipboard” whenever the mouse pointer is hovered on the clipboard button and then when the button is clicked, a tooltip with “Copied!” message appears provided there is no error occurrs.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
<script>
(function($) {
'use strict'
$(function() {
$('.clip').before('<button class="btn btn-primary button-demo" data-clipboard-target><i class="fa fa-copy"></i></button>')
$('[data-clipboard-target]')
.tooltip({
title: 'Copy to clipboard',
placement: 'left',
})
var clipboard = new Clipboard('[data-clipboard-target]', {
target: function(trigger) {
return trigger.nextElementSibling
}
})
clipboard.on('success', function(e) {
e.clearSelection()
$(e.trigger)
.attr('data-original-title', 'Copied!')
.tooltip('show')
.blur()
.attr('data-original-title', 'Copy to clipboard')
})
clipboard.on('error', function(e) {
var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
$(e.trigger)
.attr('data-original-title', fallbackMsg)
.tooltip('show')
.blur()
.attr('data-original-title', 'Copy to clipboard')
})
})
}(jQuery))
</script><div class="container mt-5">
<div class="clip clip-demo">
"Lorem ipsum dolor sit amet."
</div>
<div class="clip clip-demo" contenteditable="true">
Feel free to type anything here.
</div>
</div><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
/* 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 {
float: right;
overflow: hidden;
}
