CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Sagar Raj
Sagar Raj

Reputation: 939

Making the CSS popup stick to the top of the div

Guys take a look at the attached image. Kinda difficult to explain so attaching image.

enter image description here

What I'm looking for is, when you hover over the flag icon, a pop-up appears. It's a simple CSS popup. Basically, there's a wrap containing the icon and the popup. The popup is absolutely positioned. The wrap is relatively positioned. The popup has top:0. So it starts from the top of the wrap div. What i want is, the popup should stick to the top of the wrap div (from the triangle). And the popup's height is unknown, it depends on the content.

<div class="bjper_iconwrap">
   <span id="bjhoverimg" class="icon-flag"></span>
   <div id="bjhoverpop" class="bjoffersbigpop">
   <img class="pinktri" src="/images/pink_triangle.png">
   <p>% Special Offer</p>
   <ul>
      <li><small>£5 Voucher</small>: <small>Buy 10 VCHR get 10 SIMs free</small></li>          
   </ul>
   </div>
</div>

.bjper_iconwrap {
  position: relative;
}
.bjoffersbigpop {
  background: #d1005c;
  padding: 20px;
  color: #fff;
  min-height: 200px;
  position: absolute;
  top: 0px;
  left: -47px;
  width: 300px;
  z-index: 100;
}

Upvotes: 1

Views: 4068

Answers (3)

Fahmi B.
Fahmi B.

Reputation: 798

you can use jquery

$(document).ready(function(){
  var height= $('.bjoffersbigpop').height();
  $('.bjoffersbigpop').css('top', - height + 'px');
})

Upvotes: -2

AVAVT
AVAVT

Reputation: 7143

I think you can put the popup inside the flag:

<div class="bjper_iconwrap">
   <span id="bjhoverimg" class="icon-flag">
      <div id="bjhoverpop" class="bjoffersbigpop">
   </span>
   <img class="pinktri" src="/images/pink_triangle.png">
   <p>% Special Offer</p>
   <ul>
      <li><small>£5 Voucher</small>: <small>Buy 10 VCHR get 10 SIMs free</small></li>          
   </ul>
   </div>
</div>

And have it positioned by bottom instead of top:

.bjoffersbigpop {
  background: #d1005c;
  padding: 20px;
  color: #fff;
  min-height: 200px;
  position: absolute;
  bottom: 100%;
  left: -47px;
  width: 300px;
  z-index: 100;
}

Upvotes: 1

Pete
Pete

Reputation: 58442

If you want the bottom to start at the top instead of using top:0 use bottom:100%; and then margin-top minus the size of the arrow:

.bjoffersbigpop {
  background: #d1005c;
  padding: 20px;
  color: #fff;
  min-height: 200px;
  position: absolute;
  bottom:100%;         /*remove top and replace with bottom*/
  margin-top:-20px;    /*minus the size of your arrow - optional*/
  left: -47px;
  width: 300px;
  z-index: 100;
}

Upvotes: 3

Related Questions