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

三、效果如下 🍖

四、寄语 🍬

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

相关推荐
Mintopia4 分钟前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙4 分钟前
JS设计模式指南
前端·javascript
拳打南山敬老院8 分钟前
漫谈 MCP 构建之Resources篇
前端·后端·ai编程
golang学习记9 分钟前
从0死磕全栈第九天:Trae AI IDE一把梭,使用react-query快速打通前后端接口调试
前端
超人92111 分钟前
我用纯前端技术打造了一个开发者工具箱,10+实用工具助力提效!
前端
bug_kada11 分钟前
详解 React useCallback & useMemo
前端·react.js
Mintopia12 分钟前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
AAA_Tj12 分钟前
前端动画技术全景指南:四大动画技术介绍
前端
断竿散人17 分钟前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架
进阶的鱼19 分钟前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试