「Element-UI 表单添加tooltip提示信息」

一、应用场景 🍇

🤔️ 常见表单界面中经常需要给每个输入框的输入信息加一些说明性文字

二、实现 🍑

💡 Elemen-UI 官方文档中有 Form-Item Slot 可以实现此功能

javascript 复制代码
<div class="form-box">
	<el-divider content-position="left">表单添加tooltip提示信息</el-divider>
	<el-form size="small" label-width="155px">
	  <el-form-item prop="plate">
	    <span slot="label" style="display:inline-block;">
	      标题
	      <el-tooltip effect="dark" content="说明:1-255个字符限制" placement="bottom">
	        <i class='el-icon-question' />
	      </el-tooltip>
	    </span>
	    <el-input type="input" ></el-input>
	  </el-form-item>
	</el-form>
</div>

三、效果如下 🍖

四、寄语 🍬

我在种了五千朵玫瑰的院子里看书
别人都问我可不可以摘一朵玫瑰
只有你问我在看什么书

相关推荐
蟾宫曲3 小时前
在 Vue3 项目中实现计时器组件的使用(Vite+Vue3+Node+npm+Element-plus,附测试代码)
前端·npm·vue3·vite·element-plus·计时器
秋雨凉人心3 小时前
简单发布一个npm包
前端·javascript·webpack·npm·node.js
liuxin334455663 小时前
学籍管理系统:实现教育管理现代化
java·开发语言·前端·数据库·安全
qq13267029403 小时前
运行Zr.Admin项目(前端)
前端·vue2·zradmin前端·zradmin vue·运行zradmin·vue2版本zradmin
B1nna4 小时前
Redis学习(三)缓存
redis·学习·缓存
Unity_RAIN4 小时前
Unity 战斗系统中角色UI血条设计
ui·unity·游戏引擎
LCG元4 小时前
Vue.js组件开发-使用vue-pdf显示PDF
vue.js
_im.m.z4 小时前
【设计模式学习笔记】1. 设计模式概述
笔记·学习·设计模式
魏时烟4 小时前
css文字折行以及双端对齐实现方式
前端·css
哥谭居民00015 小时前
将一个组件的propName属性与父组件中的variable变量进行双向绑定的vue3(组件传值)
javascript·vue.js·typescript·npm·node.js·css3