console
$(function () {
$('[data-xtip]').on('mousemove', function(e) {
var x = e.clientX,
y = e.clientY,
othis = $(this),
tip = othis.attr('data-xtip'),
ele = othis.find('.xtip');
if (!ele.length && tip) {
othis.append('<div class="xtip"></div>');
}
$('.xtip').css({
top: y + 15 + 'px',
left: x + 15 + 'px'
})
.animate({
opacity: 1
}, 300)
.text(tip);
othis.on('mouseleave', function() {
othis.find('.xtip').remove();
});
return false;
});
});
<div class="wrapper">
<div class="d1" data-xtip="1jhnkljasd78955"></div>
<div class="d2" data-xtip="提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容11"></div>
</div>
body,p,ol,ul,li,dl,dd,h1,h2,h3,h4,h5,h6,input,iframe,nav,header,footer {
margin: 0;
padding: 0;
list-style: none;
}
body {
font: 16px Microsoft YaHei, sans-serif;
color: #2a2b2c;
background: #fff;
}
a,img {
text-decoration: none;
color: #2a2b2c;
border: 0;
}
*, *::before, *::after {
outline: none;
box-sizing: border-box;
}
.d1,.d2 {
width: 300px;
height: 100px;
margin: 50px auto;
background: #eee;
}
.xtip {
max-width: 300px;
font: 12px/18px Microsoft YaHei;
color: #fff;
padding: 10px 10px;
text-align: center;
background: rgba(0,0,0,.7);
border-radius: 2px;
display: block;
white-space: normal;
pointer-events: none;
position: fixed;
z-index: 99;
opacity: 0;
}