Umieszczenie karty unoszenia CSS

Question

Próbuję utworzyć kartę aktywującą z css. Mam jedno pytanie dotyczące pozycji strony w dół.

Utworzono tę stronę DEMO z codepen.io. Więc jeśli jesteś na dole strony demonstracyjnej, zobaczysz bańkę div.

Co należy zrobić, aby pokazać .bubble u dołu trójkąta w dół strony?

.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

zrobiłem plugin jQuery, która rozwiązuje te problemy, pozycjonuje się podpowiedź, aby pozostać wewnątrz okna prosty & reaguje . Można zobaczyć go w akcji tutaj tipso

I rozwidlone swoje codepen i przerobione to on codepen

myślę, że to jest to, czego szukasz :)

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

mogę znaleźć rozwiązanie w następujący sposób.

Pracuje DEMO ale nie mogłem go wykonać z window. Jeśli ktoś może to zrobić z oknem proszę odpowiedzieć mi ...

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