纯css绘制气泡，支持适应最大宽度，最大高度_web管理后台气泡最大宽度一般是多少-优快云博客

https://blog.youkuaiyun.com/CuiCui_web/article/details/107225702之前这边文章中的方式是利用js来进行控制的，然后有一个局限，不支持适应最大宽度；另外如果强行设置宽度比较大，会被左侧菜单遮挡，即使给z-index:9999,也没用。看下图展示，2种方式解决之前的不足。（后续可能会更新elementUI表格种气泡乱串问题解决方案）
在这里插入图片描述
公共部分数据定义：

data(){
      return{
        business: {
          id: '',
          name: '啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊',
          number: '',
          creatorName: '',
          ownerName: '',
          description: '',
          target: '啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊,啊啊啊啊啊啊啊啊啊啊',
          result: '啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，啊啊啊啊啊啊啊啊啊啊，'
        },
      }
    },

方式一：将hover的目标和隐藏的对象当作同一个父容器的子元素

<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="方式一：">
              <div v-if="business.target" class="fixedTowRow">
                <div class="parent-div"
                     style="">
                  <div class="content-box" style="">{{ business.target }}</div>
                  <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>
        </el-col>
      </el-row>
    </div>

样式部分：

// 方式一：将hover的目标和隐藏的对象当作同一个父容器的子元素
  .parent-div{
    .content-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;
      position: absolute;
      /*float: left;*/
      top:30px;
      left:0px;
      padding: 10px;
      /*width: 100%;*/
      width: max-content;
      max-width: 500px;
      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;
        /*top:46px;*/
        left:10%;
      }
    }

    &:hover{
      .tip-box{
        display: block;
      }
    }

  }

方式二：将hover的目标与隐藏对象当作相邻的兄弟元素

<el-form-item label="方式二：">
              <div v-if="business.target" class="fixedTowRow">
                <div class="hover-box" style="">{{ business.target }}</div>
                <div class="hover-box-nex">
                    <div class="tip-box-div">
                      {{ business.target }}
                    </div>
                </div>
              </div>
              <div v-else>
                <span>无</span>
              </div>
            </el-form-item>

样式部分：

 // 方式二： 将hover的目标与隐藏对象当作相邻的兄弟元素
  // 隐藏对象
  .hover-box-nex{
    display: none;
    position: absolute;
    top:30px;
    left:0;
    padding: 10px;
    /*width: 100%;*/
    width: max-content;
    max-width: 500px;
    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;
      //top:46px;
      left:10%;
    }
  }

  //hover的目标
  .hover-box{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: normal;
    /*position:relative;*/
    top:6px;
  }
  // //hover的目标      // 隐藏元素
  .hover-box:hover + .hover-box-nex{
    display: list-item;
    list-style-type: none;
  }
  // // 隐藏元素
  .hover-box-nex:hover{
    display: list-item;
    list-style-type: none;
  }