element-ui给禁用的按钮设置鼠标经过显示tooltip的tips提示

情境：按钮禁用的时候显示tips提示

如果我们按照一般的做法是在el-tooltip标签中包裹设置禁用disabled属性的el-button按钮，理论上这样就能达到想要的效果，“纸上得来终觉浅，绝知此事要躬行”，让我们手动试一下，效果如下：

代码如下：

<div class="appBody">
    <el-tooltip class="item" effect="dark" content="没有点击的权限" placement="top">
      <el-button type="primary" disabled>同意</el-button>
    </el-tooltip>
    <el-button type="primary">驳回</el-button>
  </div>

 答案是不能做到！

我们在禁用按钮的时候，其实把tips也禁用掉了，tooltip就是包裹button的，那个tips就是加在按钮上，按钮都被禁用了，tips怎么可能还会出现呢？

想要达到禁用的按钮鼠标经过时出现tips提示，解决办法是：在button外面再套一层标签，tooltip包裹里的第一级是谁，那么tips就是加给谁的，所以我们把tips加给button的外层，那个按钮的禁用disabled只会影响按钮而不会影响其他元素。

话不多说，效果图如下：

代码如下（在按钮外面加一个span标签）：

<div class="appBody">
    <el-tooltip class="item" effect="dark" content="没有点击的权限" placement="top">
      <!-- span是button的外层标签 -->
    <span>  
      <el-button type="primary" disabled>同意</el-button>
    </span>
    </el-tooltip>

    <el-button type="primary">驳回</el-button>
  </div>