vue实现文字过长鼠标移上去显示对应文字，移走隐藏

vue项目里实现列表里因文字过长，加上鼠标移上去显示对应文字效果

示例图片

html

<div class="name-lists">
      <div class="title">测试测试测试测试</div>
      <div class="hidden">
        <div class="lists">
          <div v-for="(item, i) in childCompany" :key="i">
            <div class="name-item" v-if="item.length < 14">
              {{ item }}
            </div>
            <div v-else class="hint" :data-hint="item"> 
              <div class="name-item">{{ item }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

注意：:data-hint=“item” 必须有

js 数据定义

 data() {
    return {
      childCompany: ['测试1','测试2','测试3','测试4','测试顶顶顶顶顶顶顶测试顶顶顶顶顶顶顶测试顶顶顶顶顶顶顶','测试1','测试1','测试顶顶顶顶顶顶顶测试顶顶顶顶顶顶顶测试顶顶顶顶顶顶顶']
    };
  },

style

   .name-lists {
    width: 100%;
    height: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    .title {
      font-size: 24px;
      color: #f9cc1d;
      margin-bottom: 10px;
      padding-left: 20px;
    }
    .hidden {
      width: 100%;
      overflow: hidden;
      .lists {
        height: 490px;
        margin-left: 20px;
        margin-right: -10px;
        overflow-y: auto;
        .name-item {
          position: relative;
          width: 360px;
          height: 40px;
          line-height: 40px;
          background: #0d183b;
          margin-top: 11px;
          padding: 0 12px;
          font-size: 22px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .hint {
    position: relative;
    width: calc(100% - 150px);
    // before 三角形   after 文字
    &::before,
    &::after {
      position: absolute;
      opacity: 0;
      z-index: 100;
      translate: 0.3s ease;
      // -webkit-transition: 0.3s ease;
      // -moz-transition: 0.3s ease;
      pointer-events: none; //禁止鼠标点击
    }
    &:hover::before,
    &:hover::after {
      opacity: 1;
    }
    &::before {
      content: "";
      background: transparent;
      border: 8px solid transparent;
       top: 100%;
      left: 70%;
      margin: -16px 0 0 0;
      border-bottom-color: #50adfe;
    }
    &::after {
      content: attr(data-hint);
      background: #50adfe;
      width: 340px;
      border-radius: 4px;
      color: #333;
      padding: 8px 10px;
      font-size: 22px;
      top: 100%;
      left: 0;
    }
  }