「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>

三、效果如下 🍖

四、寄语 🍬

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

相关推荐
AJi1 分钟前
EGL使用记录
前端·opengl
法欧特斯卡雷特5 分钟前
Kotlin 2.2.20 现已发布!下个版本的特性抢先看!
android·前端·后端
人生游戏牛马NPC1号5 分钟前
学习 Android (二十一) 学习 OpenCV (六)
android·opencv·学习
小意恩8 分钟前
el-table表头做过滤
前端·javascript·vue.js
fury_1239 分钟前
vue3:触发自动el-input输入框焦点
javascript·vue.js·elementui
小桥风满袖10 分钟前
极简三分钟ES6 - 迭代器Iterator
前端·javascript
小菜全10 分钟前
ElementUI 组件概览
前端·vue.js·elementui
Developer-YC13 分钟前
像素图生成小程序开发全解析:从图片上传到Excel图纸
java·javascript·图像处理·微信小程序·excel
lichong95115 分钟前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之android 把assert里的dist.zip 包解压到sd卡里
android·vue.js·iphone
JarvanMo20 分钟前
提升生产力:每个 iOS 开发者都应该知道的 10 个 Xcode 技巧
前端