JQuery动态创建悬浮窗

最近笔者在开发时想做一个文字提示的效果，最简单的方法就是直接使用title属性，但是使用这个属性的话，则无法更改样式，不够美观，不符合要求，在百度上逛了一圈发现好像悬浮窗都是先固定好然后在隐藏起来，然后通过更改display达到隐藏显示的效果。如果这个悬浮窗是解析某个片段，而悬浮窗一直固定在一个地方，这样一来就不太合适了。所以笔者就写了这篇博文，顺便复习了一下jQuery操作DOM。
先上效果图（title和动态创建悬浮窗）
在这里插入图片描述
主要是通过onMouseOver和onMouseOut事件实现触发显示show()和隐藏hide()函数，动态创建和删除悬浮窗，从而达到想要的效果。
下面是实现代码

<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>TEST</title>
</head>
<style type="text/css">

</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
      //显示悬浮层
      function show(event){
        console.log(event.offsetLeft);
        var data_text=event.dataset.text;
        console.log(data_text);
        var left = event.offsetLeft , top = event.offsetTop;
        var showbox=$('<div>'+data_text+'</div>').css({
                      padding:'2px 5px',
                      position:'absolute',
                      top:top+18,
                      left:left,
                      color:'#fff',
                      border:'1px solid #CCC',
                      borderRadius:'5px',
                      background: '#cc33cc',
                    }).addClass("showbox");
        showbox.insertAfter(event);
      }
      //隐藏悬浮层
      function hide(event){
        $(".showbox").remove();
      }
</script>
<body> 
    <div title="title">title</div>
    <div class="test" style="margin-bottom: 30px;" data-text="测试1" onMouseOver="show(this);"  onMouseOut="hide()">
    	测试1
    </div>
    <div class="test" style="float: left;width: 20%;" data-text="测试2" onMouseOver="show(this);"  onMouseOut="hide()">
      测试2
    </div>
    <div class="test" style="float: left;width: 20%;" data-text="测试3" onMouseOver="show(this);"  onMouseOut="hide()">
      测试3
    </div>
</body>
</html>

原文链接：https://blog.csdn.net/fly821760648/article/details/86612011