SOURCE

console 命令行工具 X clear

                    
>
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>
/* css reset */
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;
}