CSS hover card positioning

Question

I am trying to make a hover card with css. I have one question about position of the page down.

I have created this DEMO page from codepen.

Answer 1

I found a solution in the following way.

Working DEMO but i couldn't make it with window. If anyone can do it with window please answer me...

    $(document).ready(function () {
        $('.hub').mouseover(function () {
            var elementHeight = $(this).height();
            var offsetWidth = -250;
            var offsetHeight = 25;
            var toolTipWidth = $(".bubble").width();
            var toolTipHeight = $(".bubble").height();
            var documentWidth = $(document).width();
            var documentHeight = $(document).height();
            var top = $(this).offset().top;

            if (top + toolTipHeight > documentHeight) {                   
                top = documentHeight - toolTipHeight - offsetHeight - (2 * elementHeight);
            }
            var left = $(this).offset().left + offsetWidth;
            if (left + toolTipWidth > documentWidth) {                      
                left = documentWidth - toolTipWidth - (2 * offsetWidth);
            }                    
            $('.bubble').css({ 'top': top, 'left': left });
        });
    });