elementUI表格气泡乱串、闪烁、位置偏移问题解决（自制气泡，计算位置，箭头永远指向当前元素）

elementUI表格中插入气泡，会出现bug"来回切换tab页气泡会乱串"，导致这个问题的原因是，elementUI底层是通过js绘制的气泡，挂在到body中，通过display：none来控制显隐；当我们来回切换tab页的时候，时而出现display:block;的情况，这时候上一个界面的气泡就再新界面出现，导致气泡乱串了。

为了解决这个问题，尝试过好几种方式，目的就是让气泡隐藏成功或者销毁成功，但是发现这种思路只会让气泡乱串出现的频率降低，并不能从根本上解决问题，而且还会带来新的界面bug。下面先介绍一下错误的思路，带来什么样错误的bug.

第一种方式： 移出气泡dom，销毁气泡元素

// 移出气泡dom
  $route: {
   
    handler: function (val, oldVal) {
   
      if (val !== oldVal) {
   
        let dom = document.getElementsByClassName('ai-tooltip__popper')
        for(let item of dom){
   
          console.log(item)
          document.body.removeChild(item)
          this.$destroy(true);
        }
      }
    },
    // 深度观察监听
    deep: true
  }

在watch监听中，监听路由变化时，就销毁气泡。这时候给我们的界面带来一个bug，每当点击弹窗，关闭弹窗，然后打开有内容非常多的气泡界面，我们的elementUI表格就不能自适应，就会有一片空白，这个问题的出现是min-width失效了，this.$destroy(true);就是这行代码引发的。

第二种方式： 隐藏气泡，移出气泡

 // 移出气泡dom
  $route: {
   
    handler: function (val, oldVal) {
   
      if (val !== oldVal) {
   
        let dom = document.getElementsByClassName('ai-tooltip__popper')
        for(let item of dom){
   
          document.body.removeChild(item）
          // console.log(item.style,'style')
           item.style.display = 'none'
        }
      }
    },
    // 深度观察监听
    deep: true
  }

这种方式，你会发现强制更改后，控制台里面当你来回切换tab页，是成功的，但是标签上偶然会失效；可以减少出现的频率；但是导致一个新的bug，那就是用了表格中气泡出现的属性，这种情形下的气泡不出现。

---

如果你遇到的需求和我的需求一致，那么你可以采用下面这种方式。如果你遇到的需求不一致，也有同样的bug，你可以看看下面这种方式，说不定可以找到灵感。

先说一下我们的需求（在前面有的篇幅中提到过这个需求）：
1、表格高度固定4行，超过显示气泡，未超过不显示气泡；
2、表格内、气泡内需要显示原始格式（换行、空格等要与表单中保存是保持一致）
3、气泡内容太多，或导致界面闪屏，用以前提供的方法，给出最大高度，最大宽度，超过出现滚动条。
（也有固定8行的，下面例子中只介绍4行这种demo. 8行的，和这个是一样的。）
这里还要说明一下，这里的样式与纯css绘制气泡，支持适应最大宽度，最大高度这篇文中的有一些不同，虽然采用的是方式二： 将hover的目标与隐藏对象当作相邻的兄弟元素。
不同的地方在与定义方式不同，如果采用决定定位，气泡是不能超过表格中body的线的，及时给了z-index:9999,也是没用的，就像这个图一样。所以这里采用了固定定位

另外，这里隐藏的方式也不同，这里最开始采用的是display:none；后来发现，在计算气泡高度的时候，会有时候拿不到高度，这就与隐藏后是否占位置有关了。所以这里用了visibility: hidden;visibility: visible;来控制显示隐藏。

如果您需要了解表格根据高度显示气泡问题，可以先查看这篇文章：
elementUI表格内容根据高度来判断是否显示气泡，表格单元格显示原始格式（换行、空格
表格气泡内容显示不全，闪烁问题，可以先查看这篇文章：
elementUI中，表格内容太多，导致气泡会出现闪烁，或者显示不全问题解决
当前demo中也是用气泡滚动条来解决的，本例中未使用elementUI中的el-tooltip组件。
下面正式介绍实现方式：
界面效果展示：

样式方面：

 // 方式二： 将hover的目标与隐藏对象当作相邻的兄弟元素
  // 气泡盒子
  .hover-box-nex{
   
    /*display: none;*/
    height: auto;
    width: auto;
    visibility: hidden;
    position: fixed;
    padding: 10px;
    width: max-content;
    max-width: 600px;
    z-index:1111;
    height: auto;
    background: #f0f6fb ;
    color: #0a92d9 ;
    font-size: 16px ;
    border: 1px solid #0a92d9