如何基于目标元素动态更改绝对工具提示的位置

Question

I am trying to make a tooltip which basically shows a table (in my example below I used a large amount of text). However I've wanted to change the position of the tooltip when you hover on the target element that is nearly at the corner of the screen.

Here is the Fiddle

$("strong").on("mouseover", function(){
var $this = $(this),
strongText = $this.text();
$tooltipContainer.show();
$tooltipContainer.append('<span>'+ strongText + '</span>');
}).on("mousemove", function(mousePos){...

Answer 1

You can change your mousemove code a little to update top position if overlap is there like below. Check demo - Fiddle

on("mousemove", function(mousePos){
    var overlap = mousePos.pageY + posSrollY + $tooltipContainer.height() - $(window).height() - $(window).scrollTop();
    $tooltipContainer.css({
        left: mousePos.pageX,
        top: mousePos.pageY + posSrollY - ( overlap > 0 && overlap )
    });
})