layui使用tips组件实现鼠标悬浮显示提示信息

最新推荐文章于 2024-04-26 16:15:29 发布

蓝色的simon

最新推荐文章于 2024-04-26 16:15:29 发布

阅读量3.7k

点赞数 2

分类专栏：前端文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_45135600/article/details/127228881

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

鼠标悬停显示提示信息

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<script src="https://cdn.staticfile.org/layui/2.7.6/layui.js"></script>
<body>
    <span type="text" id="id1" onmouseover="show('测试1','id1')" onmouseleave="close_tips()">测试1</span>
    <span type="text" id="id2" onmouseover='show(`<div><span style="color: chartreuse">测试2</span></div>`, "id2")' onmouseleave="close_tips()">测试2</span>
</body>
<script>
    function show(msg, id){
     layer.tips(''+ msg, '#'+id, {tips: [1,'black']});
    }
    function close_tips(){
        layer.closeAll('tips');
    }
</script>
</html>