layui tooltip提示文字

发布时间:2023-11-29作者:豆子点击:199

问题描述:

    在layui表单中,我们想把一个标签做出提示,以标明这个表单元素是做什么有什么功能时,就可以用上提示文字。如:


解决办法:

<div class="layui-form-item">
    <label class="layui-form-label">
       员工邮箱<i class="layui-icon layui-icon-tips tooltip"  data-content="若该代理的客户购买的产品临期,则选中的员工会收到临期邮件。员工列表中可添加员工邮箱"></i>
   </label>
    <div class="layui-input-block">    </div>
</div>
<script type="text/javascript">
          var tips;
          $('.tooltip').on({
            mouseenter: function() {
              var that = this;
              var content = $(this).data('content');
              if (!content) return;
              var maxWidth = $(this).data('width') || 300;
              tips = layer.tips("<span style='color:#000;'>" + content + "</span>",
                that,
                {tips:[1,'#fff'],time:0,area: 'auto',maxWidth: parseInt(maxWidth)}
              );
             
            },
            mouseleave: function() {
              layer.close(tips);
            }
          });
</script>

标签:layui,tooltip,提示文字