How to show divs near the mouse cursor when hovering over a block?

Question

css

Hi all.
The task is simple to the point of triviality, but I'm really stupid.
When hovering over a block, it is necessary to show a div like a tooltip near the mouse cursor.
Regardless of where you hover, the div should be displayed specific and near the mouse cursor.
There can be up to 100 such hints per page.
Now I'm ready for the most crooked solution, the main thing is that it works)

Answer 1

If you don't bother too much, you can do this :

<div data-hint="Какой-то текст к div-у 1">1</div>
<div data-hint="Какой-то текст к div-у 2">2</div>
<div data-hint="Какой-то текст к div-у 3">3</div>
<div id="hint"></div>

div[data-hint] {
    display: inline-block;
    width: 150px;
    height: 150px;
    margin: 15px;
    border: 1px solid #900;
}
#hint {
    display: none;
    position: absolute;
    padding: 5px;
    margin: -15px auto auto 10px;
    border-radius: 5px;
    box-shadow: 0 0 1px 2px rgba(0,0,0,.3);
    background-color: #fff;
    z-index: 100500;
}

var hint = $('#hint');
$('div[data-hint]').on({
    mouseenter: function(){
        hint.text($(this).data('hint')).show();
    },
    mouseleave: function(){
        hint.hide();
    },
    mousemove: function(e){
        hint.css({top: e.pageY, left: e.pageX});
    }
});