diff --git a/src/theme/book.css b/src/theme/book.css
index 8c093abb..b531b96f 100644
--- a/src/theme/book.css
+++ b/src/theme/book.css
@@ -828,19 +828,22 @@ table thead td {
   }
 }
 .tooltiptext {
+  position: absolute;
   visibility: hidden;
-  background-color: #000;
   color: #fff;
-  opacity: 0.8;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-  filter: alpha(opacity=80);
+  background-color: #333;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */
+  left: -8px; /* Half of the width of the icon */
+  top: -35px;
+  font-size: 0.8em;
   text-align: center;
   border-radius: 6px;
   padding: 5px 8px;
   margin: 5px;
-  left: -250%;
-  bottom: 100%;
-  position: absolute;
   z-index: 1000;
 }
 .tooltipped .tooltiptext {
diff --git a/src/theme/book.js b/src/theme/book.js
index 20661baa..206bd522 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -197,28 +197,34 @@ $( document ).ready(function() {
             run_rust_code(pre_block);
         });
         buttons.find(".clip-button").mouseout(function(e){
-            e.currentTarget.setAttribute('class', 'fa fa-copy clip-button');
+            hideTooltip(e.currentTarget);
         });
     });
 
     var clipboardSnippets = new Clipboard('.clip-button', {
         text: function(trigger) {
-           return trigger.parentElement.parentElement.textContent;
+            hideTooltip(trigger);
+            return trigger.parentElement.parentElement.textContent;
         }
     });
     clipboardSnippets.on('success', function(e) {
             e.clearSelection();
-            showTooltip(e, "Copied!");
+            showTooltip(e.trigger, "Copied!");
     });
     clipboardSnippets.on('error', function(e) {
-            showTooltip(e, "Clipboard error!");
+            showTooltip(e.trigger, "Clipboard error!");
     });
 
 });
 
+function hideTooltip(elem) {
+    elem.firstChild.innerText="";
+    elem.setAttribute('class', 'fa fa-copy clip-button');
+}
+
 function showTooltip(elem, msg) {
-    elem.trigger.firstChild.innerText=msg;
-    elem.trigger.setAttribute('class', 'fa fa-copy tooltipped');
+    elem.firstChild.innerText=msg;
+    elem.setAttribute('class', 'fa fa-copy tooltipped');
 }
 
 function run_rust_code(code_block) {
diff --git a/src/theme/stylus/tooltip.styl b/src/theme/stylus/tooltip.styl
index 511c7811..f8f89f98 100644
--- a/src/theme/stylus/tooltip.styl
+++ b/src/theme/stylus/tooltip.styl
@@ -1,15 +1,16 @@
 .tooltiptext {
+  position: absolute;
   visibility: hidden;
-  background-color: black;
   color: #fff;
-  opacity: 0.8;
+  background-color: #333;
+  transform: translateX(-50%);  /* Center by moving tooltip 50% of its width left */
+  left: -8px;   /* Half of the width of the icon */
+  top: -35px;
+  font-size: 0.8em;
   text-align: center;
   border-radius: 6px;
   padding: 5px 8px;
   margin: 5px;
-  left: -250%;
-  bottom: 100%;
-  position: absolute;
   z-index: 1000;
 }
 .tooltipped .tooltiptext {