Как показывать див около курсора мыши, при наведении на какой-либо блок?

Question

[Сергей Горячев]

Привет всем.
Задача до тривиальности простая, но что-то я прям сильно туплю.
Нужно при наведении на блок показывать див типа всплывающей подсказки около курсора мыши.
Не зависимо от места, куда навели, див должен показываться конкретный и около курсора мыши.
Таких подсказок может быть до 100 на странице.
Сейчас уже готов на самое кривое решение, главное чтобы работало)

Answer 1

[Денис]

Если не особо заморачиваться, то можно так:

<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});
    }
});

Comments

[Сергей Горячев]

Спасибо, прям то, что нужно. Заморачиваться времени нет, огромное спасибо за решение!

Answer 2

[Михаил]

или так https://jsfiddle.net/wzbxm8q6/6/

Comments

[Сергей Горячев]

Это даже проще в реализации "быстрого запуска", так как мне важно html использовать в tooltips.