通过css绘制气泡解决文字溢出，鼠标移入出现气泡，移出隐藏气泡（支持多行文本，单行文本）

首先看一下效果图：

这个场景是非常常见的，而大多数的方法，就是通过字数来控制，v-if= word.length>20 就显示elementUI中的气泡；

这种做法，我们会发现它有弊端，部分分辨率下，一行文本展示的字数是不同的，这就会导致大屏幕下，字数没有超出就显示了气跑了； 小屏幕下，字数超出了，却没有气泡。

下面介绍一种方法，目前发现的最佳方案。通过css解决这个问题，这种场景下我们可以不用elementUI中的气泡，我们可以自己用css实现，然后样式上与项目中其他使用过elementUI气泡的地方，保持一致就好了。

具体的结构部分：

<div class="span-rap mouseenterTipSpan"
    @mouseenter="showTipsHeight($event,business.result)"  @mouseleave="hiddenTipsHeight($event,business.result)">
  <span class="hover-box" style="">{{ business.result }</span>
  <div class="tip-box">
  	<div class="tip-box-div">
        {{ business.target }}
    </div>
  </div>
</div>

然后样式文件，写在公共文件中； 方法写在公共js中，通过混入，进行使用。这样会简单很多，需要使用的地方，只需要保持html结构一致即可。

下面展示css部分、 混入方法部分、 完整的html部分

css部分：

// 根据高度超出，手绘气泡 begin
.span-rap.mouseenterTipSpan{
  .hover-box{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: normal;
    position:relative;
    top:6px;
  }
  .tip-box{
    display: none;
  }
}
.span-rap.mouseenterTipSpan.defaultLine1{ // 行数设置为1，超出1行，出现省略号
  .hover-box{
    -webkit-line-clamp: 1;
  }
}
.span-rap.mouseenterTipSpan.tip{
  .tip-box{
    display: block;
    position: absolute;
    top:30px;
    right:0;
    padding: 10px;
     width: 100%;
    z-index:1111;
    height: auto;
    background: #f0f6fb ;
    color: #0a92d9 ;
    font-size: 16px ;
    border: 1px solid #0a92d9 ;
    line-height: 1.2;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    .tip-box-div{
      max-height: 500px;
      overflow-y: auto;
    }
    &:after{
      content: '\00a0';
      width: 0;
      height: 0;
      display: block;
      border-color: transparent;
      border-style: solid;
      border-width: 6px;
      /*border-top-color: #0a92d9 !important;*/
      border-bottom-color: #0a92d9 !important;
      position: absolute;
      z-index:-1;
      top:-13px;
      left:50%;
    }
  }
}

// 根据高度超出，手绘气泡 end

混入方法部分：
创建一个js文件，这里我的目录是@/assets/js/common_mixins/tooltip.js

export default {
  methods: {
    // 鼠标移入
    showTipsHeight(e,val){
      var target = e.target;
      console.log(target, 'target')
      var targetChild = e.target.querySelector('.hover-box');
      if(targetChild.offsetHeight< targetChild.scrollHeight){
        e.target.setAttribute('class', `${e.target.className} tip`)
      }
    },
    // 鼠标移出
    hiddenTipsHeight(e, val){
      e.target.setAttribute('class', `${e.target.className.replace("tip","")}`)
    },
  }
}

记得去界面中引入

完整的html结构

<template>
  <div style="padding:20px;">
    <el-row>设置行数，行数超出，出现省略号，鼠标移入显示气泡，移出隐藏气泡</el-row>
    <el-row
      style="margin-top: 15px;">
      <el-col :span="8">
        <el-form class="formBox"
                 label-width="110px">
          <el-form-item label="OKR目标：">
            <div v-if="business.target" class="fixedTowRow">
              <div class="span-rap mouseenterTipSpan"
                   style=" " @mouseenter="showTipsHeight($event,business.target)"  @mouseleave="hiddenTipsHeight($event,business.target)">
                <span class="hover-box" style="">{{ business.target }}</span>
                <div class="tip-box">
                	<div class="tip-box-div">
                    {{ business.target }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <span>无</span>
            </div>
          </el-form-item>
          <el-form-item label="OKR成果：">
            <div v-if="business.result">
              <div class="span-rap mouseenterTipSpan defaultTwoRow"
                   style=" " @mouseenter="showTipsHeight($event,business.result)"  @mouseleave="hiddenTipsHeight($event,business.result)">
                <span class="hover-box" style="">{{ business.result }}</span>
                <div class="tip-box">
                	<div class="tip-box-div">
                    {{ business.result }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <span>无</span>
            </div>
          </el-form-item>
          <el-form-item label="项目名称：">
            <div v-if="business.name">
              <div class="span-rap mouseenterTipSpan defaultTwoRow defaultLine1"
                   style=" " @mouseenter="showTipsHeight($event,business.name)"  @mouseleave="hiddenTipsHeight($event,business.name)">
                <span class="hover-box" style="">{{ business.name }}</span>
               <div class="tip-box">
                	<div class="tip-box-div">
                    {{ business.name }}
                  </div>
                </div>
            </div>
            <div v-else>
              <span>无</span>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import tooltip from '@/assets/js/common_mixins/tooltip.js'
  export default {
    mixins: [
      tooltip
    ],
    data() {
      return {
        business: {
          id: '',
          name: '啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊',
          number: '',
          creatorName: '',
          ownerName: '',
          description: '',
          target: '啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊',
          result: '啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，'
        },
      };
    },
    methods: {
     
    }
  }
</script>

<style lang="scss" scoped>
  // 超过两行出现省略，鼠标移入显示气泡
.defaultTwoRow{
  .hover-box{
    -webkit-line-clamp: 2;
  }
}
</style>

也可以自行设置类名，覆盖公共样式中的行数，如：