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

三、效果如下 🍖

四、寄语 🍬

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

相关推荐
"菠萝"4 分钟前
C#知识学习-020(访问关键字)
开发语言·学习·c#
AntBlack4 分钟前
Z-Image 发布了 ,赶紧体验了一把(配套 Modal执行脚本)
前端·后端·aigc
●VON25 分钟前
Electron 项目在“鸿蒙端”与“桌面端”运行的区别
javascript·学习·electron·openharmony
诸葛韩信34 分钟前
前端工程化1——npm insatall背后的工作原理
前端·npm·node.js
徐小夕@趣谈前端35 分钟前
NO-CRM本地安装版开源!人人都能拥有开箱即用的智慧CRM管理系统
javascript·vue.js·开源
箫笙默42 分钟前
JS基础 - 正则笔记
开发语言·javascript·笔记
k***12171 小时前
SpringBoot返回文件让前端下载的几种方式
前端·spring boot·后端
لا معنى له1 小时前
残差网络论文学习笔记:Deep Residual Learning for Image Recognition全文翻译
网络·人工智能·笔记·深度学习·学习·机器学习
专注前端30年1 小时前
如何使用 HTML5 的 Canvas + JavaScript 实现炫酷的游戏得分特效?
前端·javascript·游戏·html5·canvas·canva可画
q***06291 小时前
解决 Tomcat 跨域问题 - Tomcat 配置静态文件和 Java Web 服务(Spring MVC Springboot)同时允许跨域
java·前端·spring