需求：修改 table 中 tooltip 的样式及位置。
尝试：表格中 tooltip 默认是挂载到 body 中的，修改当前表格 tooltip 样式，全局都会受影响。
求解：自定义表格当前行的 tooltip。
自定义比较简单，直接上代码：
<el-table-columnprop="explanation"label="类型说明"width="160"><template slot-scope="{row}"><el-tooltip v-if="row.explanation && row.explanation.length > 10" popper-class="tableTypePopperClass" effect="light" :content="row.explanation" placement="bottom"><span ref="tableMemberType" class="typeClass">{{ row.explanation }}</span></el-tooltip><span v-else>{{row.explanation || "暂无数据"}}</span></template></el-table-column>
效果如下：
修改样式比较重要的一点在于为 tooltip 添加 popper-class 类，popper-class 的作用在于为 Tooltip 的 popper 添加类名，因为 tooltip 是挂载到body 中的，所以为当前 tooltip 添加 popper-class 类，是为了更方便的修改它。
修改样式重点在于 tooltip 弹出窗中顶部小箭头样式的修改，这一部分是通过伪类来实现的，所以需要修改 tooltip 自带的伪类的样式，如下：
.typeClass {display: inline-block;max-width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.tableTypePopperClass {max-width: 500px;color: #333!important;line-height: 18px!important;border: 1px solid #EBEEF5!important;}// 箭头样式是通过两个样式叠加形成的，内部的三角形，及外部的边线，// 所以想要修改小三角的样式需要同时修改内三角及外边线的样式// 修改外边线的样式.tableTypePopperClass[x-placement^=bottom] .popper__arrow{border-bottom-color: #EBEEF5!important;}// 修改内三角的样式.tableTypePopperClass[x-placement^=bottom] .popper__arrow:after {border-bottom-color: #FFF!important;}// 修改tooltip 从顶部弹出时 箭头的样式.tableTypePopperClass[x-placement^=top] .popper__arrow{border-top-color: #EBEEF5!important;}.tableTypePopperClass[x-placement^=top] .popper__arrow:after {border-top-color: #FFF!important;}
^= 选择器
[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。
解释：
在 tooltip 的 HTML 元素中placement 属性指代 popper 的弹出位置，修改从下方弹出的 popper 中的箭头的样式时，因为 placement 属性值为 bottom，所以找寻 x-placement 属性值以 bottom 开头的元素，即匹配 x-placement 属性值以 bottom开头的元素，其他原理相同。
