快看快看！Element UI表格、表单问号提示的两种实现方式对比

               

上图分别是tooltip和title属性两种实现方式效果图，两种方式使用效果和体验会有差距，个人测试后在Vue2配合ElementUI组件项目中推荐使用Tooltip实现方式。

<el-table :data="tableData">
    <el-table-column type="index" width="20" align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="90" >
       <template slot="header" >
        <span>日期</span>
         <!-- tooltip dark主题 -->
         <el-tooltip content="第一种tooltip实现" placement="right">
           <i class="el-icon-question"/>
         </el-tooltip>
       </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="70" >
        <template slot="header">
           <span> 姓名 </span>
           <i class="el-icon-question" title="第二种title属性实现"/>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" >
         <template slot="header" >
            <span>地址</span>
            <!-- tooltip light主题 -->
            <el-tooltip effect="light" 
             :content="'数据过长时可以进行换行；\n第二行数据'"
             placement="right">
               <i class="el-icon-question"/>
            </el-tooltip>
          </template>
      </el-table-column>
 </el-table>

注意：提示数据过长想要换行时，在组件内设置.el-tooltip__popper的样式是不会生效的，在页面控制台查看就可发现tooltip的层级是在顶层，和我们写的组件是同级，所以在同级组件里写样式是无论如何都不会生效的。

解决方法：只要能影响到和app同级的tooltip都可以解决该情况

// 组件的created钩子函数 
created() {
    // 原生操作dom元素添加样式
    this.$nextTick(()=>{
      let dom = document.createElement("style");
      dom.innerHTML = '.el-tooltip__popper {white-space: pre-line!important;}';
      window.document.head.appendChild(dom)
    })
 }

 实现效果对比：

对比项	tooltip实现	title属性实现
样式	有dark和light两种主题，气泡样式比较友好	只有一个矩形，样式比较生硬
使用感	滑动接触就会展示，反应比较丝滑迅速	快速滑动时存在无响应情况，鼠标需要放在小图标上稍加等待才会展示，图标较小时更不友好
点击效果	点击无任何反应，不影响展示	点击后鼠标依旧悬浮在图标上，但是提示消失后也不会再出现