Limit element position by CSS

Question 1

jQuery

var _offset;
$(document).on("mousemove", function (e) {
    if (!_offset) _offset = $("body").offset();



    var calc = e.pageX;
    var getWidth = $('body').width() - $("#help").width();
    $("#help").show();


    if (calc > getWidth) {           
        $("#help").css({
            right: (e.pageX - _offset.right) + "px",
            top: (e.pageY - _offset.top + 25) + "px"

        });
    } else {
        $("#help").css({
            left: (e.pageX - _offset.left + 10) + "px",
            top: (e.pageY - _offset.top + 25) + "px",
            right: "auto"
        });
    }


})

can be adjusted as per dynamic width of document
on body body{overflow:hidden;} overflow hidden is added so scroll bar wont affect position of tooltip

Hope it helps!

Question 2

hi U can use following code it works fine

<html>
<head>
<script src="jquery-1.10.2.js"></script>
<style>
#help {
    white-space: nowrap;
    position: absolute;
    background: yellow;
    color: #111;
    padding: 4px 4px 2px 4px;
}

</style>
<script>
var _offset;
$(document).ready(function(){
$(document).on("mousemove", function (e) {
    if (!_offset) _offset = $("body").offset();
    $("#help").show();
    $("#help").css({
        left: (e.pageX - _offset.left + 10) + "px",
        top: (e.pageY - _offset.top + 25) + "px"
    });


    if((e.pageX - _offset.left + 10)>(window.screen.availWidth-50))
    {
        //you can change the position or hide
            $("#help").css({
            left: (e.pageX - _offset.left - 120) + "px",
            top: (e.pageY - _offset.top + 25) + "px"
        });
            //$("#help").hide();
    }
    else
    {

        $("#help").show();
    }

});
});
</script>
</head>
<body>
<div id="help">This is some help</div>
</body>
</html>

Question 3

You can use something like this:

var _offset;
$(document).on("mousemove", function (e) {
    if (!_offset) _offset = $("body").offset();
    $("#help").show();
    $("#help").css({

        left: (e.pageX - _offset.left) > 400 ? '400px' : (e.pageX - _offset.left + 10) + "px" ,
        top: (e.pageY - _offset.top + 25) > 400 ?  '400px' : (e.pageY - _offset.top + 25) + "px"
    });
})

increase/decrease the value of 400 to your desired value.

fiddle