Moved inline JS. Also added Tooltip for copy btn.

go/go/templates/link_box.html

@@ -23,16 +23,9 @@
   <div class="col-md-8">
     <h3>Go Address:</h3>
        <a id="link" href="{{url.short}}">{{domain}}{{url.short}}</a>
-      <br></br>
-      <button type="button" class="button btn btn-default btn-xs fa" role="button"
-          id="btn" data-clipboard-target="#link">
-          <i class="fa fa-clipboard" aria-hidden="true"></i> Copy to clipboard</button>
-      <script src="../../static/js/clipboard.min.js"></script>
-      <script>
-      var btn = document.getElementById('btn');
-      var clipboard = new Clipboard(btn);
-      </script>
-
+       <button id="btn" type="button" class="button btn btn-default btn-xs fa" role="button"
+             data-clipboard-target="#link">
+            <i class="fa fa-clipboard" aria-hidden="true"></i></button>
     <br></br>
 
     <h3>Address Details:</h3>
@@ -104,6 +97,8 @@
   </div>
 </div>
 
+<script src="../../static/js/clipboard.min.js"></script>
+<script src="../../static/js/copy.js"></script>
 <script>
   $(function () {
     var option = {'trigger': 'hover'};

go/static/js/copy.js

+/*
+ * Script for copying text and displaying a tooltip.
+ */
+
+$('#btn').tooltip({
+    trigger: 'click',
+    placement: 'bottom'
+});
+
+function setTooltip(button, message) {
+    $(button).tooltip('hide').attr('data-original-title', message)
+        .tooltip('show');
+}
+
+function hideTooltip(button) {
+    window.setTimeout(function() {
+        $(button).tooltip('hide');
+    }, 700);
+}
+
+var clipboard = new Clipboard('#btn');
+
+clipboard.on('success', function(e) {
+    e.clearSelection();
+    setTooltip(e.trigger, 'Copied!');
+    hideTooltip(e.trigger);
+});