可以在输入框的标签中添加 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 表单输入框添加鼠标悬停提示,提高用户体验。

Layui 表单输入框鼠标悬停提示:使用 layer.tips() 实现

原文地址: https://www.cveoy.top/t/topic/lUCd 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录