Layui 表单输入框鼠标悬停提示:使用 layer.tips() 实现
可以在输入框的标签中添加 lay-tips 属性并设置为需要显示的提示信息,然后在输入框的父级元素中添加 lay-form-item 类名,最后在页面加载完成后调用 layer.tips() 方法即可。
HTML 代码:
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">网址链接</label>
<div class="layui-input-block">
<input type="text" name="wz" id="wz" lay-verify="title" autocomplete="off" placeholder="请输入需要防行的链接" class="layui-input" lay-tips='左边么么哒'>
</div>
</div>
</form>
JavaScript 代码:
$(function(){
layer.tips('左边么么哒', '#wz', {
tips: [4, '#78BA32']
});
});
该代码会在鼠标悬停在输入框 #wz 上时,显示一个带有绿色背景的提示框,提示信息为 '左边么么哒'。
注意:
lay-tips属性的值为需要显示的提示信息,建议使用单引号。layer.tips()方法中的第一个参数是提示信息,第二个参数是需要显示提示的元素 ID 或 class 名。tips属性是一个数组,用于设置提示框的位置和颜色,其中第一个元素表示位置,第二个元素表示颜色。
使用该方法可以方便地为 Layui 表单输入框添加鼠标悬停提示,提高用户体验。
原文地址: https://www.cveoy.top/t/topic/lUCd 著作权归作者所有。请勿转载和采集!