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表达式{{}}中如何拼接字符问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vuex的使用及持久化state的方式详解
这篇文章主要介绍了vuex的使用及持久化state的方式详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
vue项目element-ui级联选择器el-cascader回显的问题及解决
这篇文章主要介绍了vue项目element-ui级联选择器el-cascader回显的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue实现用户长时间不操作自动退出登录功能的实现代码
这篇文章主要介绍了vue实现用户长时间不操作自动退出登录功能的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-07-07
vue集成kindeditor富文本的实现示例代码
这篇文章主要介绍了vue集成kindeditor富文本的实现示例代码，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06
vue beforeDestroy clearInterval清除定时器失效的解决
这篇文章主要介绍了vue beforeDestroy clearInterval清除定时器失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
解决vue eslint开发严格模式警告错误的问题
这篇文章主要介绍了解决vue eslint开发严格模式警告错误的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
详解Vue.js自定义tipOnce指令用法实例
这篇文章主要介绍了详解Vue.js自定义tipOnce指令用法实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
vue3报错提示找不到模块“./XXX.vue”或其相应的类型声明问题
这篇文章主要介绍了vue3报错提示找不到模块“./XXX.vue”或其相应的类型声明问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
前端vue3树形组件使用代码示例
最近在开发时遇到一个问题,是在输入框里面放一个树形组件,这篇文章主要给大家介绍了关于前端vue3树形组件使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-07-07

element tooltip的使用

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具