I am trying to customize the tooltip's width of element-ui framework because text inside tooltip is broken incorrectly.

Here is generated tooltip element with is placed on the bottom of body tag

<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>

and here is my vue code:

<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>

and

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