el-table 三角形提示

 
<script>
export default {
  data () {
    return {
      tableData: [
        {
          ddd: '11111111111111111111111111111111111111111111111111'
        }
      ]
    }
  }
}
script>
 
<style lang="less" >
.tipclass[x-placement^='top'] .popper__arrow {
  border-top-color: #fff !important;
  opacity: 1;
  position: relative;
  &::before {
    position: absolute;
    bottom: -9px;
    left: calc(50% - 10px);
    overflow: hidden;
    width: 8px;
    height: 8px;
    background: #fff;
    border-left: 1px solid #28b3f9;
    border-top: 1px solid #28b3f9;
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg);
    content: '';
  }
}
 
.tipclass {
  border: 1px solid #28b3f9 !important;
  color: red;
}
.tooltips {
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis; // ...展示
  display: -webkit-box; // 弹性伸缩盒盒子模型显示
  -webkit-line-clamp: 1; // 行数
  -webkit-box-orient: vertical; // 从上到下垂直排列子元素
}
style>