【Vue3+ElementPlus】内容超宽显示省略号并tooltip气泡提示

        前言：该组件现用于可视化大屏中数值部分的展示，暂无法用于复杂内容的场景展示，欢迎大佬们帮忙改进。

        实现目标：在ElementPlus库tooltip组件的基础上二次封装，实现在组件内部书写内容，内容超出组件的父盒子宽度时，隐藏组件内容的超出部分，显示省略号并通过tooltip提示全部内容。

        效果展示：

 

使用方法：

// script部分


// css部分

        代码BUG：在Tip组件中书写的任何内容都会展示在气泡中，包括注释。所以不要在组件内部书写注释！！

         组件代码：

附往期tooltip样式修改的css代码

// tooltips 自定义样式
.el-popper.is-customized {
  max-width: 400px !important;
  padding: 6px 12px !important;
  background: linear-gradient(180deg, #4574AB, #4574AB) !important;
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #4574AB, #4574AB) !important;
  right: 0;
}

// tooltips 默认样式
.el-popper.is-dark {
  max-width: 400px !important;
  padding: 6px 12px !important;
  color: #fff;
  border: 0px;
  background: linear-gradient(180deg, #4574AB, #4574AB) !important;
}

.el-popper.is-dark .el-popper__arrow::before {
  border: 0px;
  background: linear-gradient(45deg, #4574AB, #4574AB) !important;
  right: 0;
}