Javascript CSS悬停卡定位

我正在尝试用

css

制作一张悬停卡。我有一个关于页面向下位置的问题

我从codepen.io创建了这个页面。所以，如果您在演示页面的底部，您会看到气泡

div

出现

如何在页面下方三角形底部显示

.bubble

？

---

我用下面的方法找到了一个解决方案

正在使用但我无法使用

窗口
。如果有人能用窗户做，请回答我

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

编辑
我制作了一个jQuery插件来解决这个问题，重新定位工具提示以保持在窗口内，简单且响应迅速。您可以在此处看到它的作用

我用叉子叉了你的密码笔，重新做了一遍

我想这就是你要找的：）

$（'.hub'）。在({
mouseenter:function（）{
$（this.addClass（'zIndex'）；
左上角，
工具提示宽度=250，
高度=120，
箭头高度=15，
elementHeight=$（this）.height（），
elementWidth=$（this）.width（），
documentHeight=$（窗口）.height（），
bounding=$（this）[0]。getBoundingClientRect（），
topHub=bounding.top；
如果（topHub
我可能错了，但我认为您需要javascript来检查bounds@Timmerz你说得对。但我找不到示例应用程序。您使用的是什么浏览器？因为在FF的最新版本中，它工作得很好。在这里的整版中尝试了您的演示：@innovation，请记住，如果您不奖励奖金，一半将被给予投票最高的答案。“你不会得到任何赏金的。”克利夫伯顿我只需要从这个问题上得到帮助。但我不明白为什么有人投我反对票。我再次取消删除我的问题。如果您已经在使用jQuery，为什么不采用现成的解决方案呢？有很多jQuery插件。例如，是否可以为悬停添加
时间
。比如当你在div上悬停几秒钟后，
.bubble
打开？
    $(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 });
        });
    });

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