element-ui 中el-table-column提示框样式修改

该功能的业务应用场景就是列表单元格数据过多时我们显示部分数据，当鼠标进入单元格时弹窗显示详细内容

设置支持该属性 show-overflow-tooltip 为true 默认false不显示

  
      <el-table-column show-overflow-tooltip>
          ...          
      </el-table-column>

---

默认样式太不理想,所以要根据业务自定义

---

修改弹窗内容区样式

.el-tooltip__popper {
   max-width: 300px;                 //改宽度 默认全屏
   background: #dfeaf5 !important;   //改背景
   color: #393e49 !important;        //改文字
}

---

修改弹窗小箭头样式（上下）

---

弹窗在上面的样式

.el-tooltip__popper[x-placement=top] .popper__arrow {
  border-top-color: #dfeaf5;
}
.el-tooltip__popper[x-placement=top] .popper__arrow:after {
  border-top-color: #dfeaf5;
}

---

弹窗在下面的样式

.el-tooltip__popper[x-placement=bottom] .popper__arrow {
  border-bottom-color: #dfeaf5;
}
.el-tooltip__popper[x-placement=bottom] .popper__arrow:after {
  border-bottom-color: #dfeaf5;
}