elementUI tooltip箭头样式(表格自定义)

需求：修改 table 中 tooltip 的样式及位置。

尝试：表格中 tooltip 默认是挂载到 body 中的，修改当前表格 tooltip 样式，全局都会受影响。

求解：自定义表格当前行的 tooltip。

自定义比较简单，直接上代码：

<el-table-column
    prop="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开头的元素，其他原理相同。

popover 弹窗自动调整位置，避免被窗口遮挡，添加属性：

:fallback-placements="['bottom-start', 'top-start', 'right', 'left']"