Made the Copy button tooltip prettier.

go/go/templates/link_box.html

@@ -9,8 +9,8 @@
     <div id="link-container" class="input-group">
        <a id="link" class="form-control" href="{{url.short}}">{{domain}}{{url.short}}</a>
        <div id="button-container" class="input-group-addon">
-       <button id="btn" type="button" class="button btn btn-default btn-xs fa" role="button"
-             data-clipboard-target="#link">
+       <button id="copy-button" type="button" class="button btn btn-default btn-xs fa" role="button"
+             data-clipboard-target="#link" title="Copy to Clipboard">
             <i id="clipboard-icon" class="fa fa-clipboard fa-1g" aria-hidden="true"></i></button>
        </div>
     </div>

go/static/css/style-link-box.css

@@ -21,13 +21,13 @@ pre {
     padding-top: 4px;
 }
 
-#btn {
+#copy-button {
     border: none;
     background-color: #eeeeee;
     padding-bottom: 3px;
 }
 
-#btn:focus {
+#copy-button:focus {
     outline: none;
 }
 
@@ -38,3 +38,8 @@ pre {
 #link-container {
     width: 400px;
 }
+
+.tooltip-inner {
+    white-space: nowrap;
+    max-width: none;
+}

go/static/js/copy.js

@@ -2,26 +2,20 @@
  * Script for copying text and displaying a tooltip.
  */
 
-$('#btn').tooltip({
-    trigger: 'click',
+var clipboard = new Clipboard('#copy-button');
+
+$('#copy-button').tooltip({
+    trigger: 'hover',
     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');
+$('#copy-button').on('hidden.bs.tooltip', function () {
+    $('#copy-button').attr('data-original-title', 'Copy to Clipboard');
+});
 
 clipboard.on('success', function(e) {
     e.clearSelection();
-    setTooltip(e.trigger, 'Copied!');
-    hideTooltip(e.trigger);
+    $('#copy-button').attr('data-original-title', 'Copied!').tooltip('show');
 });
+
+