精确实现popover效果：内容超出容器则tooltips+popover展示，反之无效果

前端中对于：“文字超出tooltip展示，鼠标滑过气泡展示所有内容”，这样的需求是很常见的，element-ui也有专门的组件el-popover组件支持类似需求的实现

要实现这样的效果，使用el-popover组件即可。

<el-table-column prop="date" label="原始popover" width="180">
    <template slot-scope="{row}">
       <el-popover placement="top" trigger="hover">
           <p style="max-width: 300px;overflow:auto;word-break:break-all">{
  {row.first}}                        </p>
               <p style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" slot="reference"
               >{
  {row.first}}</p>
       </el-popover>
    </template>
</el-table-column>

这样一律不做区分内容长短，全部使用气泡，如果内容没有超出容器，也会有气泡展示，略显粗暴。

这样效果其实并不好，实际需求一般还会有一句：如果不超过容器宽度则不展示气泡。即便产品不指出，前端也应该处理一下。因此再做一点优化，对内容做个判断，字数超出一定值才展示气泡，通过if-else实现

<el-table-column prop="date" label="原始popover" width="180">
    <template slot-scope="{row}">
       <el-popover placement="top" trigger="hover" v-if="row.first.length > 30">
          <p style="max-width: 300px;overflow:auto;word-break:break-all">{
  {row.first}}</p>
          <p style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
              slot="reference">{
  {row.first}}
          </p>
        </el-popover>
	<p v-else>{
  {row.first}}</p>
    </template>
</el-table-column>

或者通过el-popover的disabled属性设置

<el-table-column prop="date" label="原始popover" width="180">
   <template slot-scope="{row}">
      <el-popover :disabled="row.first.length <= 30" placement="bottom" trigger="hover&