CSS悬停卡片定位

Question

我正试图使用 css 制作一个悬停卡片。我有一个关于页面位置的问题。

我从 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;
}

- user4082764

---

可能我说错了，但我认为你需要使用JavaScript来检查边界。 - Timmerz

@Timmerz，你说得没错。但我找不到一个样例应用程序。 - user4082764

你使用的是哪个浏览器？因为在最新版本的火狐浏览器中，它能够正常工作。我在这里的全屏演示中尝试了你的DEMO：http://codepen.io/shadowman86/full/mCIkt - dippas

@创新，请记住，如果你没有授予奖励，一半将会被给予得票最高的回答者。你将不会收回任何赏金。 - Ian Hazzard

@CliffBurton 我只是需要那个问题的帮助。但我不明白为什么有人给了我负投票。我又把我的问题恢复了。 - user4082764

Answer 1

编辑

我制作了一个jQuery插件来解决这个问题，重新定位工具提示以保持在窗口内，简单又响应式。你可以在这里tipso看到它的运行效果。

我fork了你的codepen，并在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');
  }
});

- Bojan Petkovski

---

在悬停时添加“时间”是否可行？例如，当您悬停在一个div上时，然后在几秒钟后打开“.bubble”？ - user4082764