el-button禁用后，按钮上el-tooltip的内容无法触发的问题

问题描述

页面上有一个编辑按钮，当按钮禁用时，鼠标hover按钮时，tooltip显示不能编辑的原因。但在一些同事的chrome浏览器上查看的时候，发现hover按钮时，tooltip没有显示出来。代码如下：

<el-tooltip :disabled="editFlag=== 'Y'">
  <span slot="content">不能编辑的原因span>
  <el-button
    :disabled="editFlag !== 'Y'"
    @click="handleEdit"
  >
    编辑
  el-button>
el-tooltip>
1
2
3
4
5
6
7
8
9

初步解决方案

观察发现同事的chrome版本较低，进行升级后，页面能正常显示。

查找原因及解决方法

通过百度，发现问题出现的主要原因是：el-button disbled的时候，影响到了el-tooltip。所以通过对el-button包裹一层div能够解决该问题。代码如下：

<el-tooltip :disabled="editFlag=== 'Y'">
  <span slot="content">不能编辑的原因span>
  <div>
    <el-button
      :disabled="editFlag !== 'Y'"
      @click="handleEdit"
    >
      编辑
    el-button>
  div>
el-tooltip>
1
2
3
4
5
6
7
8
9
10
11

参考文章

• 饿了么UI按钮禁用时加文字提示，按钮正常时不加文字提示（el-tooltip使用注意事项） - 水冗水孚的文章 - 知乎
  https://zhuanlan.zhihu.com/p/353598379