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

这篇具有很好参考价值的文章主要介绍了element-ui给禁用的按钮设置鼠标经过显示tooltip的tips提示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

按钮禁用后tooltip 文字提示,vue.js,前端,javascript

代码如下：

<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只会影响按钮而不会影响其他元素。

话不多说，效果图如下：

按钮禁用后tooltip 文字提示,vue.js,前端,javascript

代码如下（在按钮外面加一个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>

文章来源地址https://www.toymoban.com/news/detail-528722.html

到了这里，关于element-ui给禁用的按钮设置鼠标经过显示tooltip的tips提示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！