JSFiddle - React, Tailwind, and code Playground

by Alexandr Loginov

HTML

<h1>Плавающая подсказка</h1>
<div class="header center"></div>
<div class="map center">
    <div class="room_1"></div>
    <div class="room_2"></div>
</div>
<span class="help">
    подсказка
</span>

CSS

.center {
    margin: auto;
}

.header {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    margin-bottom: 10px;
}
.map {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    overflow: hidden;
}
.room_1, .room_2 {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}
.room_1 {
    background: red;
    float: left;
}
.room_2 {
    background: blue;
    float: right;
}
.help {
    position: absolute;
    border-radius: 6px;
    border: 2px solid green;
    padding: 10px;
    display: none;
}

JavaScript

$('.map').mouseover(function(el) {
    $('.room_1, .room_2').mousemove(function (pos) { 
        $(".help").css('left',(pos.pageX+20)+'px').css('top',(pos.pageY+20)+'px').css('display', 'block'); 
    });
});

$('.map').mouseout(function(el) {
    $('.help').css('display', 'none');
});