How to fix the positioning of the tooltip?

Here is the page with the problem
On the page opposite services a question mark to restore the proper float block with id="hint"
here css it
#hint{
display:none;
 position: absolute;
 border:1px solid #ccc;
padding:5px;
 width: 250px;
background:#fff;
border-radius:5px;
 font-size: 14px;
}

but this takes the absolute for a reference point, Fig understand what the block with id="hint" POPs up on mouse-over in the area of the footer
I have blunt in the evening , where to go need to block with id="hint" appears above the question mark with relative problem
$(document).ready(function(){
$('.hover').mousemove(function(e){
 var hint = $(this).attr('ht');
 $('#hint').css({'left': e.pageX, 'top': e.pageY});
$('#hint').show().text(hint);
}).mouseout(function(){
$('#hint').hide();
});
});
July 2nd 19 at 14:25
1 answer
July 2nd 19 at 14:27
The block #hint should not only be position: absolute, but the parent with position: relative, which actually sets the start point for the absolute position #hint. If not, the position specifies the body element.
I wrapped it in div c relative , the same song - Eloy.Morar commented on July 2nd 19 at 14:30
: Here's an example - codepen.io/aliencash/pen/zozPaR - Graham.Bernhard commented on July 2nd 19 at 14:33

Find more questions by tags HTMLCSSjQuery