CSS悬浮卡定位 [英] CSS hover card positioning

问题描述

我想用 css 制作悬停卡。我有一个关于页面位置的问题。

我创建了

我分发您的代码并重新加载它在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 ; 
 top = -toolTipHeight  -  arrowHeight; 
 left =  - （elementWidth / 2）; 
} 
 
 
 $（'。bubble'）。css（{
'top'：top，
'left'：left 
}）; 
}，
 mouseleave：function（）{
 $（'bubble'）。removeClass（'top bottom'）; 
 $（this）.removeClass（'zIndex'）; 
} 
}）; 
  

I am trying to make a hover card with css. I have one question about position of the page down.

I have created this DEMO page from codepen.io . So if you are in bottom of the demo page then you see bubble div shows up.

What should I do to show the .bubble at the bottom of the triangle down the page?

.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;
}

解决方案

EDIT

I have made a jQuery plugin that addresses this issues, repositions the tooltip to stay inside window, simple & responsive. You can see it in action here tipso

I forked your codepen and reworked it on codepen

I guess this is what you are looking for :)

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

这篇关于CSS悬浮卡定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！