title: CSS hover card positioning
body: <p>I am trying to make a hover card with <code>css</code>. I have one question about position of the page down.</p>
  
  <p>I have created this <strong><a href="http://codepen.io/shadowman86/pen/mCIkt" rel="noreferrer">DEMO</a></strong> page from codepen.io . So if you are in bottom of the demo page then you see bubble <code>div</code> shows up.</p>
  
  <p>What should I do to show the <code>.bubble</code> at the bottom of the triangle down the page?
  <img src="https://i.stack.imgur.com/bwJo4.jpg" alt="enter image description here"></p>
  
  <pre><code>.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;
  }
  </code></pre>