element tooltip的使用
更新时间：2023年02月02日 15:56:11 作者：笑到世界都狼狈
本文主要介绍了element tooltip的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在项目的开发中，有好多地方都需要对页面标签添加一些备注信息，方便用户可以更深入的了解内容的含义。
element-ui中就用tooltip的使用，用起来很方便，且可以调整提示文字出现的文字，官方地址如下：
实现效果如下图所示：
简单的主要代码如下：
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start"> <el-button>上左</el-button> </el-tooltip>
使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
如果在平时开发中想要用显示一个图标，鼠标悬停时显示提示信息，效果如下：
代码如下：
// 直接加在某段文字前后 <el-tooltip effect="dark" placement="bottom-start"> <div slot="content">注：提示信息</div> <i class="el-icon-info" /> </el-tooltip>
// 插在label里面的用法
<el-form-item label="" prop="nameAccessControl" label-width="135px">
<span slot="label">
标签名称
<el-tooltip effect="dark" placement="bottom-start">
<div slot="content">注：提示信息</div>
<i class="el-icon-info" />
</el-tooltip>
</span>
<el-input v-model="temp.nameAccessControl" maxlength="100"></el-input>
</el-form-item>总之，tooltip还是蛮好用的，项目中很多地方都有用到，即方便又美观
到此这篇关于element tooltip的使用的文章就介绍到这了,更多相关element tooltip内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
这篇文章主要介绍了vue项目使用高德地图的定位及关键字搜索功能的实例代码，也是小编踩了无数坑总结出来的经验,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
这篇文章主要介绍了vue3 自定义loading的操作方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了vue3-ace-editor如何配置语法问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
下面小编就为大家分享一篇vue2.0使用swiper组件实现轮播的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了基于vue写一个全局Message组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
Vue结合ElementUI实现数据请求和页面跳转功能(最新推荐)
我们在Proflie.vue实例中,有beforeRouteEnter、beforeRouteLeave两个函数分别是进入路由之前和离开路由之后,我们可以在这两个函数之内进行数据的请求,下面给大家分享Vue结合ElementUI实现数据请求和页面跳转功能,感兴趣的朋友一起看看吧2024-05-05
vue3+js+elementPlus使用富文本编辑器@vueup/vue-quill详细教程
富文本编辑器在任何项目中都会用到,下面这篇文章主要给大家介绍了关于vue3+js+elementPlus使用富文本编辑器@vueup/vue-quill的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
本文主要介绍了element-plus 下拉框实现全选的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了element-ui配合node实现自定义上传文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了如何使用Vue实现封装树状图,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
最新评论