fix copy tooltip UI bug

.browserslistrc

@@ -1,3 +1,3 @@
-> 1%
+> 0.2%
 last 2 versions
 not dead

src/assets/scss/element-variables.scss

@@ -369,6 +369,16 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
   .el-submenu__title:hover {
     background-color: unset;
   }
+  .el-tooltip__popper[x-placement^=top].copy-tip {
+    background-color: #6A6F77;
+    box-shadow: 0px 8px 14px rgba(47, 59, 90, 0.2);
+    margin-bottom: 4px;
+    padding: 4px 8px;
+    color: #FFF;
+    font-size: 12px;
+    line-height: 16px;
+    border-radius: 4px;
+  }
 }
 @media screen and (max-width: 767px) {
   // 导航菜单
@@ -410,6 +420,23 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
       }
     }
   }
+  .el-tooltip__popper[x-placement^=top].copy-tip {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0px;
+    transform: translateY(80px);
+    padding: 9px 16px;
+    background-color: #FFFFFF;
+    box-shadow: 0px 4px 24px rgba(129, 149, 200, 0.18);
+    border-radius: 8px;
+    font-size: 16px;
+    line-height: 24px;
+    color: #000;
+    .min {
+      display: inline-block;
+      margin-right: 8px;
+    }
+  }
 }
 @media screen and (max-width: 429px) {
   // 删除弹框

src/views/projects/api/apiKeys.vue

@@ -21,25 +21,48 @@
           </el-table-column>
           <el-table-column label="Public Key" min-width="200">
             <template slot-scope="scope">
-              <transition name="el-fade-in-linear"><div v-show="showTooltip === '#public' + scope.$index" class="copy-tip"><img src="@/assets/images/common/check_right.svg" class="min" />Copied</div></transition>
-              <div class="key-input public-key-input" :class="{'copy-active': isCopyActive === '#public' + scope.$index}"
-              :data-clipboard-text="scope.row.projectKey" @click="copy('#public' + scope.$index)" :id="'public' + scope.$index">{{ scope.row.projectKey }}</div>
+              <el-tooltip
+                popper-class="copy-tip"
+                content="Copied"
+                :value="showTooltip === '#public' + scope.$index"
+                :visible-arrow="false"
+                :manual="true"
+                placement="top"
+              >
+                <template slot="content"><img src="@/assets/images/common/check_right.svg" class="min" />Copied</template>
+                <div
+                  class="key-input public-key-input"
+                  :class="{'copy-active': isCopyActive === '#public' + scope.$index}"
+                  :data-clipboard-text="scope.row.projectKey"
+                  @click="copy('#public' + scope.$index)"
+                  :id="'public' + scope.$index"
+                >{{ scope.row.projectKey }}</div>
+              </el-tooltip>
             </template>
           </el-table-column>
           <el-table-column prop="secretKey" label="Secret Key" min-width="200">
             <template slot-scope="scope">
-              <transition name="el-fade-in">
-                <div v-show="showTooltip === '#secret' + scope.$index" class="copy-tip">
-                  <img src="@/assets/images/common/check_right.svg" class="min" />
-                  Copied
+              <el-tooltip
+                popper-class="copy-tip"
+                content="Copied"
+                :value="showTooltip === '#secret' + scope.$index"
+                :visible-arrow="false"
+                :manual="true"
+                placement="top"
+              >
+                <template slot="content"><img src="@/assets/images/common/check_right.svg" class="min" />Copied</template>
+                <div
+                  class="key-input secret-key-input"
+                  :class="{'copy-active': isCopyActive === '#secret' + scope.$index}"
+                  :type="showEye === scope.$index ? 'show' : 'hide'"
+                  :data-clipboard-text="scope.row.secretKey"
+                  @click="copy('#secret' + scope.$index)"
+                  :id="'secret' + scope.$index"
+                >
+                  {{ showEye === scope.$index ? scope.row.secretKey : formatterKey(scope.row.secretKey) }}
+                  <span v-show="scope.row.secretKey" class="show-password" :class="showEye === scope.$index ? 'eye-open' : 'eye-close'" @click.stop="toggleShowEye(scope.$index)"></span>
                 </div>
-              </transition>
-              <div class="key-input secret-key-input" :class="{'copy-active': isCopyActive === '#secret' + scope.$index}"
-              :type="showEye === scope.$index ? 'show' : 'hide'" :data-clipboard-text="scope.row.secretKey"
-              @click="copy('#secret' + scope.$index)" :id="'secret' + scope.$index">
-                {{ showEye === scope.$index ? scope.row.secretKey : formatterKey(scope.row.secretKey) }}
-                <span v-show="scope.row.secretKey" class="show-password" :class="showEye === scope.$index ? 'eye-open' : 'eye-close'" @click.stop="toggleShowEye(scope.$index)"></span>
-              </div>
+              </el-tooltip>
             </template>
           </el-table-column>
           <el-table-column prop="createDate" label="Creation Date" :formatter="formatterDate" min-width="140"></el-table-column>
@@ -237,21 +260,6 @@ export default class apikeys extends Vue {
     .edit-icon, .delete-icon {
       cursor: pointer;
     }
-    .copy-tip {
-      position: absolute;
-      top: -4px;
-      left: 80px;
-      transform: translate(-50%, -100%);
-      background: #6A6F77;
-      box-shadow: 0px 8px 14px rgba(47, 59, 90, 0.2);
-      padding: 4px 8px;
-      color: #FFF;
-      font-size: 12px;
-      line-height: 16px;
-      border-radius: 4px;
-      // transition: opacity 0.3s, transform 0.4s, top 0.4s;
-      z-index: 1;
-    }
     .key-projectName {
       white-space: nowrap;
       overflow: hidden;
@@ -273,34 +281,6 @@ export default class apikeys extends Vue {
     }
   }
 }
-@media screen and (min-width: 768px) {
-  .api-keys .keys-table ::v-deep .el-table__row:first-child .copy-tip {
-    top: 60px;
-  }
-}
-@media screen and (max-width: 767px) {
-  .api-keys .keys-table .copy-tip {
-    display: flex;
-    align-items: center;
-    padding: 9px 16px;
-    height: 42px;
-    top: 100%;
-    transform: translate(-50%, 6px);
-    background: #FFFFFF;
-    box-shadow: 0px 4px 24px rgba(129, 149, 200, 0.18);
-    border-radius: 8px;
-    font-size: 16px;
-    line-height: 24px;
-    color: #000;
-    .min {
-      display: inline-block;
-      margin-right: 8px;
-    }
-  }
-  .api-keys .keys-table ::v-deep .el-table__row:last-child .copy-tip {
-    top: calc(-100% - 22px);
-  }
-}
 </style>
 <style lang="scss">
 // element修改

src/views/projects/user/webhooks.vue

@@ -50,11 +50,26 @@
               </el-tooltip>
             </template>
             <template slot-scope="scope">
-              <transition name="el-fade-in-linear"><div v-show="showTooltip === '#secretToken' + scope.$index" class="copy-tip"><img src="@/assets/images/common/check_right.svg" class="min" />Copied</div></transition>
-              <div class="key-input secret-key-input" :class="{'copy-active': isCopyActive === '#secretToken' + scope.$index}" :type="showEye === scope.$index ? 'show' : 'hide'"
-              :data-clipboard-text="scope.row.secretToken" @click="copy('#secretToken' + scope.$index)" :id="'secretToken' + scope.$index">{{ showEye === scope.$index ? scope.row.secretToken : formatterKey(scope.row.secretToken) }}
-                <span v-show="scope.row.secretToken" class="show-password" :class="showEye === scope.$index ? 'eye-open' : 'eye-close'" @click="toggleShowEye(scope.$index)"></span>
-              </div>
+              <el-tooltip
+                popper-class="copy-tip"
+                content="Copied"
+                :value="showTooltip === '#secretToken' + scope.$index"
+                :visible-arrow="false"
+                :manual="true"
+                placement="top"
+              >
+                <template slot="content"><img src="@/assets/images/common/check_right.svg" class="min" />Copied</template>
+                <div
+                  class="key-input secret-key-input"
+                  :class="{'copy-active': isCopyActive === '#secretToken' + scope.$index}"
+                  :type="showEye === scope.$index ? 'show' : 'hide'"
+                  :data-clipboard-text="scope.row.secretToken"
+                  @click="copy('#secretToken' + scope.$index)"
+                  :id="'secretToken' + scope.$index"
+                >{{ showEye === scope.$index ? scope.row.secretToken : formatterKey(scope.row.secretToken) }}
+                  <span v-show="scope.row.secretToken" class="show-password" :class="showEye === scope.$index ? 'eye-open' : 'eye-close'" @click="toggleShowEye(scope.$index)"></span>
+                </div>
+              </el-tooltip>
             </template>
           </el-table-column>
           <el-table-column prop="responseTime" label="" class-name="header-with-info" :formatter="formatterDate" min-width="180">