<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>测试-liu 劉</title>
</head>
<script src="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel=" stylesheet" type="text/css" href="./layui/css/layui.css">
<script>
</script>
<body style="padding: 50px;">
<blockquote class="layui-elem-quote">注意： </blockquote>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>方法一</legend>
</fieldset>
<br>
<hr>
<a href="javascript:;" id="id1" onmouseover="show('测试6666','id1')" onmouseleave="close_tips()">6666</a>
<hr>
<br>
<span type="text" id="id2" onmouseover='show(`<div><span style="color: chartreuse">测试2-22</span></div>`, "id2")'
onmouseleave="close_tips()">测试2</span>
<br>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>方法二</legend>
</fieldset>
<div class="content" id="content">
<label for="">这是一个提示：</label>
<span class="iconfont icon-combined-shape-copy tooltip-icon liu_tips">请把鼠标上上面</span>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>方法三</legend>
</fieldset>
<div style="margin-top: 10px;">
<input type="text" id="tips" class="tips" placeholder="请点击这里面" />
</div>
</body>
<!-- 方法一 -->
<script>
// tips 鼠标划过提示
function show(msg, id) {
layer.tips('' + msg, '#' + id, { tips: [2, 'black'] });
}
function close_tips() {
layer.closeAll('tips');
}
</script>
<!-- 方法二 -->
<script>
$(function () {
var tips;
$(".icon-combined-shape-copy").on({
mouseenter: function () {
var that = this;
tips = layer.tips("<span style='color:#000;'>说明：你可以看到了吧，哈哈哈</span>", that, { tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500 });
},
mouseleave: function () {
layer.close(tips);
}
});
})
// 多个提示显示
$(".icon-combined-shape-copy01").on({
mouseenter: function () {
tips = layer.tips("<span style='color:#000;'>略略略略略</span>", "#id1", { tips: [3, '#ddd'], time: 0, area: 'auto', maxWidth: 500, tipsMore: true });
},
mouseleave: function () {
layer.close(tips);
}
});
$(".icon-combined-shape-copy02").on({
mouseenter: function () {
tips = layer.tips("<span style='color:#000;'>嘻嘻嘻嘻嘻嘻</span>", "#id2", { tips: [3, '#ddd'], time: 0, area: 'auto', maxWidth: 500, tipsMore: true });
},
mouseleave: function () {
layer.close(tips);
}
});
</script>
<!-- 方法三 -->
<script>
$('.tips').on('click', function () {
layer.tips('请输入用户名', '#tips', {
tips: [3, '#0FA6D8'], //设置tips方向和颜色 类型：Number/Array，默认：2 tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']
tipsMore: false, //是否允许多个tips 类型：Boolean，默认：false 允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启
time: 2000 //2秒后销毁，还有其他的基础参数可以设置。。。。这里就不添加了
});
});
</script>
</html>
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！