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

EDIT

I have made a jQuery plugin that addresses this issues, repositions the tooltip to stay inside window, simple & responsive. You can see it in action here tipso

I forked your codepen and reworked it on codepen

I guess this is what you are looking for :)

$('.hub').on({
  mouseenter: function() {
    $(this).addClass('zIndex');

    var top, left,
      toolTipWidth = 250,
      toolTipHeight = 120,
      arrowHeight = 15,
      elementHeight = $(this).height(),
      elementWidth = $(this).width(),
      documentHeight = $(window).height(),
      bounding = $(this)[0].getBoundingClientRect(),
      topHub = bounding.top;


    if (topHub < topHub + toolTipHeight && topHub + toolTipHeight + arrowHeight + elementHeight <= documentHeight) {

      $('.bubble').addClass('top');
      top = elementHeight + arrowHeight;
      left = -(elementWidth / 2);

    }

    if (topHub + toolTipHeight + arrowHeight + elementHeight >= documentHeight) {
      $('.bubble').addClass('bottom');
      top = -toolTipHeight - arrowHeight;
      left = -(elementWidth / 2);
    }


    $('.bubble').css({
      'top': top,
      'left': left
    });
  },
  mouseleave: function() {
    $('.bubble').removeClass('top bottom');
    $(this).removeClass('zIndex');
  }
});