From 6c9bd003dd7d6d3d69cf1d308aeafd0edb8eac88 Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski <henrik@eossweden.org>
Date: Wed, 20 Nov 2019 16:38:14 +0100
Subject: [PATCH] Adding tooltip (tippy library) to clipboardjs.

---
 _includes/js.html | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/_includes/js.html b/_includes/js.html
index f6fee02..83fb9bf 100644
--- a/_includes/js.html
+++ b/_includes/js.html
@@ -12,6 +12,9 @@
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
 
+<script src="https://unpkg.com/popper.js@1"></script>
+<script src="https://unpkg.com/tippy.js@5"></script>
+
 <script type="text/javascript">
 
 	anchors.add();
@@ -35,12 +38,32 @@
 				btn.setAttribute('data-clipboard-target', '#' + currentId);
 				btn.innerHTML = '<i class="far fa-file-code fa-2x"></i>';
 				this.insertBefore(btn, this.firstChild);
+
+				// Create tooltip
+				tippy(btn, {
+					trigger: 'manual',
+					content: "Copied!",
+					placement: 'left',
+				});
 			}
 		});
 
 		var clipboard = new ClipboardJS('.btn-copy-code');
+
+		// Attach callback to copy successful event.
 		clipboard.on('success', function(event) {
-    		event.clearSelection();
+			const tooltip = event.trigger._tippy;
+
+			// Clear text selection.
+			event.clearSelection();
+
+			// Show tooltiop
+			tooltip.show();
+
+			// After 1 second, hide it again.
+			setTimeout(function() {
+				tooltip.hide();
+			}, 1000, tooltip);
 		});
 	});