Posizionamento scheda hover CSS

Question

Sto provando a creare una scheda hover con css. Ho una domanda sulla posizione della pagina in basso.

Ho creato questa pagina DEMO da codepen.io. Quindi, se sei nella parte inferiore della pagina demo, vedi la bolla div.

Cosa devo fare per mostrare il .bubble nella parte inferiore del triangolo in basso nella pagina?

.container{ 
    width:400px; 
    height:400px; 
    margin:0px auto; 
    margin-top:50px; 
} 
.bubble 
{ 
position: absolute; 
width: 250px; 
height: 120px; 
padding: 0px; 
background: #000; 
-webkit-border-radius: 2px; 
-moz-border-radius: 2px; 
border-radius: 2px; 
    display:none; 
} 

.bubble:after 
{ 
content: ''; 
position: absolute; 
border-style: solid; 
border-width: 0 15px 15px; 
border-color: #000 transparent; 
display: block; 
width: 0; 
z-index: 1; 
top: -15px; 
left: 194px; 
} 
.hub:hover .bubble{ 
    display:block; 
} 
.wrp{ 
    width:300px; 
    height:68px; 
} 

Answer 1

EDIT

ho fatto un plugin jQuery che affronta questi problemi, riposiziona il tooltip di stare dentro la finestra, semplice & reattivo . Potete vederlo in azione qui tipso

I biforcato tua codepen e rielaborato si on codepen

credo che questo è quello che stai cercando :)

$('.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'); 
    } 
}); 

Answer 2

ho trovato una soluzione nel modo seguente.

Lavoro DEMO ma non sono riuscito a farlo con window. Se chiunque può farlo con finestra favore, rispondimi ...

$(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 }); 
     }); 
    });