CSS懸停卡定位

Question

我試圖做一個懸停卡與css。我有一個關於頁面位置的問題。

我已經創建了這個DEMO從codepen.io頁面。所以，如果你在演示頁面的底部，那麼你會看到泡泡div顯示出來。

我該怎麼做才能在頁面下方的三角形底部顯示.bubble？

.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

編輯

我已經作出了jQuery插件，解決了這一問題，重新定位提示留在裏面的窗口，簡單&響應。你可以看到它在這裏的行動tipso

我叉你codepen並重新整理on codepen

我想這是你在找什麼:)

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

我發現下面的方式解決。

工作DEMO但我不能使它與window。如果任何人都可以用窗口做到這一點請你回答我...

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