使绝对元素的宽度适合内容

Question

我正在尝试自定义 element-ui 框架的工具提示宽度，因为工具提示中的文本被错误地破坏了。

这里生成的工具提示元素放置在body标签的底部

<div role="tooltip" id="el-tooltip-8061" aria-hidden="true" class="el-tooltip__popper is-dark popper-width" style="transform-origin: center top;z-index: 2031;/* display: none; */">
   <div data-v-65209316="" class="row">
      <div data-v-65209316="" class="col-5">Employee</div>
      <div data-v-65209316="" class="col-7">John Smith</div>
   </div>
   <div x-arrow="" class="popper__arrow" style="left: 77px;"></div>
</div>

这是我的 vue 代码：

<el-tooltip placement="bottom" theme="dark" popper-class="popper-width" :popper-options="customPopperOptions">
    <template slot="content">
        <div class="row">
            <div class="col-5">
                Employee
            </div>
            <div class="col-7">
                John Smith
            </div>
        </div>
    </template>
</el-tooltip>

和

customPopperOptions() {
  return {container: document.body, boundariesElement: document.body}
}

Answer 1

我看到您正在使用引导类，您是否考虑过将它们分开，因为您的 12 网格在您的员工工具提示上占用的空间更少。第一关， 试着让他们出去玩：

       <div class="row">
            <div class="col-6">
                Employee
            </div>
            <div class="col-6">
                John Smith
            </div>
        </div

看看这是否有效，应该分开差异。如果这会导致问题，那么您可能需要调整您的 CSS 代码，因为它看起来好像您的类 .popper-width 具有设定的宽度。