<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>移动悬浮提示</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- 悬浮提示内容 -->
<div class="tip" style="display:none">hello, I am mobile</div>
<!-- 鼠标动作对象 -->
<div class="content">hover me</div>
<script>
$(document).ready(function(){
$('.content').hover(
function(){
$('.tip').fadeIn('slow');
}
);
$('.content').mousemove(function(e){
var top = e.pageY+5;
var left = e.pageX+5;
$('.tip').css({
'top' : top + 'px',
'left': left+ 'px'
});
});
$('.content').mouseout(function(){
$('.tip').hide();
});
});
</script>
</body>
</html>
<style type="text/css">
.tip{
position:absolute;
padding: 6px 5px;
background-color:#dddddd;
border-radius: 4px;
}
.content{
width: 500px;
height: 300px;
border:1px solid #dddddd;
cursor:pointer;
display: inline-block;
}
</style>