如何让Element UI绝对定位tooltip宽度适配内容，解决文本异常折行

Element UI 默认的el-tooltip__popper元素自带max-width: 200px的限制，搭配自定义栅格布局时空间不足就会触发异常折行。你已经通过popper-class属性指定了自定义类名popper-width，直接基于这个类修改样式即可解决。

操作步骤 #

• 新增样式规则
  注意tooltip是直接挂载在body节点下，样式不能写在带scoped属性的style块中，可二选一实现：
  1. 将样式写入项目全局公共样式文件
  2. 在当前使用tooltip的Vue文件中新增一个不带scoped的style块
     样式代码：

.popper-width {
  /* 可根据实际布局需求调整最小宽度值 */
  min-width: 180px;
  /* 清除默认最大宽度限制 */
  max-width: unset !important;
  /* 如果不需要内部文本换行，可额外添加以下配置 */
  /* white-space: nowrap; */
}

• 可选轻量方案
  如果不想修改全局样式，也可以直接给tooltip内部的自定义内容外层指定固定宽度，强制撑开容器：

<template slot="content">
  <div class="row" style="width: 180px">
    <div class="col-5">Employee</div>
    <div class="col-7">John Smith</div>
  </div>
</template>

修改完成后tooltip容器会被正常撑开，内部栅格元素不会再出现挤压折行的问题。

内容的提问来源于stack exchange，提问作者Denis Stephanov