Add the tooltip

languages/en.yml

@@ -59,3 +59,7 @@ counter:
 
 comments:
   no_js: Please enable JavaScript to view the comments.
+
+tooltip:
+  copy_tip: Copy to clipboard!
+  copied: Copied!

languages/zh-CN.yml

@@ -40,3 +40,7 @@ pagination:
 
 comments:
   no_js: 加载评论需要在浏览器启用 JavaScript 脚本支持。
+
+tooltip:
+  copy_tip: 复制到粘贴板!
+  copied: 复制成功!

layout/_partial/scripts.ejs

@@ -5,22 +5,26 @@
 <% if (is_post()){ %>
   <%- js('lib/clipboard/clipboard.min') %>
   <script type="text/javascript">
-  $(function(){
-    var btn = '<i class="btn-copy far fa-clone"></i>';
+  $(function() {
+    // copy-btn HTML
+    var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"<%= __('tooltip.copy_tip') %>\">";
+    btn += '<i class="far fa-clone"></i>';
+    btn += '</span>'; 
+    // mount it!
     $(".highlight .code pre").before(btn);
     var clip = new ClipboardJS('.btn-copy', {
-        target: function(trigger) {
-          return trigger.nextElementSibling;
-        }
+      target: function(trigger) {
+        return trigger.nextElementSibling;
+      }
     });
     clip.on('success', function(e) {
+      e.trigger.setAttribute('aria-label', "<%= __('tooltip.copied') %>");
       e.clearSelection();
     })
   })
   </script>
 <% } %>
 <%- js('js/main') %>
-
 <!-- search -->
 <% if (config.search && (page.search || page.type === "search")){ %>
   <%- js('js/search.js') %>

source/css/_partial/tooltip.styl

@@ -0,0 +1,78 @@
+// ref: https://github.com/primer/primer/blob/master/modules/primer-tooltips/lib/tooltips.scss
+.tooltipped
+  position: relative
+  
+// This is the tooltip bubble
+.tooltipped::after
+  position: absolute
+  z-index: 1000000
+  display: none
+  padding: .2em .5em
+  -webkit-font-smoothing: subpixel-antialiased
+  color: $color-background
+  font-display: swap // @stylint ignore
+  font-weight: 400
+  font-size: $font-size * 0.8
+  font-family: $font-family-body
+  line-height: $line-height
+  text-rendering: geometricPrecision
+  text-align: center
+  word-wrap: break-word
+  white-space: pre
+  content: attr(aria-label)
+  background: $color-text
+  border-radius: 3px
+  opacity: 0
+  
+// This is the tooltip arrow
+.tooltipped::before
+  position: absolute
+  z-index: 1000001
+  display: none
+  width: 0
+  height: 0
+  color: $color-text
+  pointer-events: none
+  content: ''
+  border: 6px solid transparent
+  opacity: 0
+  
+// delay animation for tooltip
+@keyframes tooltip-appear
+  from
+    opacity: 0
+  to
+    opacity: 1
+    
+// This will indicate when we'll activate the tooltip
+.tooltipped:hover,
+.tooltipped:active,
+.tooltipped:focus
+  &::before,
+  &::after
+    display: inline-block
+    text-decoration: none
+    animation-name: tooltip-appear
+    animation-duration: 0.1s
+    animation-fill-mode: forwards
+    animation-timing-function: ease-in
+    
+// Tooltipped south
+.tooltipped-s,
+.tooltipped-sw
+  &::after
+    top: 100%
+    right: 50%
+    margin-top: 6px
+  &::before
+    top: auto
+    right: 50%
+    bottom: -7px
+    margin-right: -6px
+    border-bottom-color: $color-text
+.tooltipped-sw::after
+  margin-right: -16px
+  
+// Move the tooltip body to the center of the object.
+.tooltipped-s::after
+  transform: translateX(50%)

source/css/style.styl

@@ -121,6 +121,7 @@ body
 @import "_partial/pagination"
 @import "_partial/search"
 @import "_partial/tags"
+@import "_partial/tooltip"
 @import "_partial/categories"
 // Code
 @import "_highlight/" + $highlight
@@ -180,14 +181,18 @@ code
     &:after
       clear: both
 
-  :hover .btn-copy
-    opacity: 1
+  &:hover 
+    .btn-copy
+      opacity: 1
 
   .btn-copy
-    font-size: 1.2rem;
+    font-size: 1.2rem
     position: absolute
     right: 20px
     opacity: 0
+    transition: opacity 0.2s ease-in
+    &:hover
+      color: $color-accent-1
 
   pre
     padding: 0