Improve the UX of clipboard button

_includes/refactor-content.html

@@ -133,7 +133,7 @@
       {% assign _new_content = _new_content | append: _snippet
           | append: '<div class="code-header">'
           | append: _label
-          | append: '<button aria-label="copy" data-original-title="'
+          | append: '<button aria-label="copy" title-succeed="'
           | append: site.data.locales[lang].post.button.copy_code.succeed
           | append: '"><i class="far fa-clipboard"></i></button></div>'
           | append: '<div class="highlight"><code>'

_javascript/utils/clipboard.js

@@ -41,7 +41,7 @@ $(function() {
   });
 
   $(btnSelector).tooltip({
-    trigger: 'click',
+    trigger: 'hover',
     placement: 'left'
   });
 
@@ -53,11 +53,12 @@ $(function() {
   const ICON_DEFAULT = getIcon(btnSelector);
 
   function showTooltip(btn) {
-    $(btn).tooltip('show');
+    const succeedTitle = $(btn).attr('title-succeed');
+    $(btn).attr('data-original-title', succeedTitle).tooltip('show');
   }
 
   function hideTooltip(btn) {
-    $(btn).tooltip('hide');
+    $(btn).tooltip('hide').removeAttr('data-original-title');
   }
 
   function setSuccessIcon(btn) {

_sass/addon/syntax.scss

@@ -214,15 +214,19 @@ div {
     @extend %cursor-pointer;
 
     &[timeout] {
-      border-color: var(--clipboard-checked-color);
+      &:hover {
+        border-color: var(--clipboard-checked-color);
+      }
+
       i {
         color: var(--clipboard-checked-color);
       }
     }
 
     &:not([timeout]):hover {
-      background-color: gray;
-      > i {
+      background-color: rgba(128, 128, 128, 0.37);
+
+      i {
         color: white;
       }
     }