tooltip提取成组件加指令

src/components/TooltipInEditor.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="tooltip-wrapper" :style="{left: framePosLeft}">
+    <div class="arrow" :style="{left: arrowPosLeft}"></div>
+    <div class="remark">{{text}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: '测试test测试test',
+    },
+    framePosLeft: {
+      type: String,
+      default: '50%',
+    },
+    arrowPosLeft: {
+      type: String,
+      default: '50%',
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.tooltip-wrapper {
+  position: absolute;
+  // left: 50%;
+  transform: translateX(-50%);
+  top: -46px;
+  z-index: 10000;
+  display: none;
+
+  background: #191A1C;
+  border: 1px solid rgba(151, 151, 151, 0.2);
+  border-radius: 3px;
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
+  padding: 8px 8px;
+  cursor: default;
+  pointer-events: none;
+  word-break: keep-all;
+  font-size: 12px;
+  .arrow {
+    width: 12px;
+    height: 12px;
+
+    position: absolute;
+    // left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    bottom: -6px;
+
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    border-right: 1px solid rgba(151, 151, 151, 0.2);
+    border-bottom: 1px solid rgba(151, 151, 151, 0.2);
+    background: #191A1C;
+  }
+  .remark {
+    line-height: 17px;
+    color: rgba(255, 255, 255, 0.6);
+  }
+}
+</style>

src/components/tableSelect2.vue

@@ -119,11 +119,16 @@
     <div class="btns">
       <button class="ui-button upload-btn">
         <span>上传素材</span>
-        <i class="iconfont icon-material_prompt hover-tips">
-          <div>
-            <div v-if="currentMaterialType === 'image'" class="remark">请上传10MB以内、jpg/png格式的图片</div>
-            <div v-if="currentMaterialType === 'pano'" class="remark">请上传2:1、120MB以内、jpg格式的图片</div>
-          </div>
+        <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tool-tip-wrapper>
+          <TooltipInEditor
+            :text="
+              currentMaterialType === 'image' ? '请上传10MB以内、jpg/png格式的图片' :
+              currentMaterialType === 'pano' ? '请上传2:1、120MB以内、jpg格式的图片' :
+              ''
+            "
+            :framePosLeft="'30px'"
+            :arrowPosLeft="'calc(50% - 24px)'"
+          ></TooltipInEditor>
         </i>
       </button>
       <div>
@@ -141,6 +146,7 @@ import { getMaterialList} from "@/api";
 import { changeByteUnit } from '@/utils/file'
 import config from "@/config";
 import { debounce } from "@/utils/other.js"
+import TooltipInEditor from '@/components/TooltipInEditor.vue'
 
 export default {
   props:{
@@ -153,6 +159,7 @@ export default {
     },
   },
   components:{
+    TooltipInEditor,
   },
   watch:{
     searchKey: {
@@ -588,32 +595,10 @@ export default {
       display: inline-block;
       margin-right: 4px;
     }
-    i.hover-tips {
+    i.tool-tip-for-editor {
       font-size: 12px;
       transform: scale(0.923) translateY(1px);
       cursor: default;
-      // tip的方框
-      > div {
-        top: -30px;
-        left: -30px;
-        transform: translateX(0);
-        background: #313131;
-        border: 1px solid rgba(151, 151, 151, 0.2);
-        > div {
-          color: #fff;
-        }
-        // tip的箭头
-        &::before {
-          position: absolute;
-          bottom: -14px;
-          transform: translateX(0);
-          left: 30px;
-          border-top: 7px solid #313131;
-        }
-        .remark {
-          line-height: 20px;
-        }
-      }
     }
   }
   > div {

src/directives/vToolTipWrapper.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+
+Vue.directive('tool-tip-wrapper', {
+  bind: function (el, binding) {
+    el.style.position = 'relative'
+    let tooltipWrapper = el.querySelector('.tooltip-wrapper')
+    if (tooltipWrapper) {
+      el.addEventListener('mouseenter', function () {
+        tooltipWrapper.style.display = 'block'
+      })
+      el.addEventListener('mouseleave', function () {
+        tooltipWrapper.style.display = 'none'
+      })
+    }
+  }
+})

src/pages/edit.js

@@ -6,6 +6,7 @@ import store from '../Store'
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
 import '@/directives/vTitle.js'
+import '@/directives/vToolTipWrapper.js'
 
 Vue.use(Viewer,{
   defaultOptions: {