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

Hermione_log2024-05-23 11:30

一、应用场景 🍇

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

二、实现 🍑

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

三、效果如下 🍖

四、寄语 🍬

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