popover

[eshchapov]

Google style popovers.

.popover
{
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  background-color:#fff;
  border:1px solid;
  position:absolute;
  z-index:1201!important;
  width:255px;
  line-height:17px;
  border-color:#bbb #bbb #a8a8a8;
  padding:16px
}

.popover .arrow:before
{
  border:9px solid
}

.popover .arrow:after
{
  border:8px solid
}

.popover.top .arrow
{
  bottom:0;
  right:50%
}

.popover.bottom .arrow
{
  top:-9px;
  right:50%
}

.popover.right .arrow
{
  left:-9px;
  top:50%
}

.popover.left .arrow
{
  right:0;
  top:50%
}

.popover.top .arrow:before,.popover.bottom .arrow:before
{
  left:-9px;
  border-color:#bbb transparent
}

.popover.top .arrow:before
{
  border-bottom-width:0;
  border-color:#a8a8a8 transparent
}

.popover.top .arrow:after,.popover.bottom .arrow:after
{
  left:-8px;
  border-color:#fff transparent
}

.popover.top .arrow:after
{
  border-bottom-width:0
}

.popover.bottom .arrow:before
{
  border-top-width:0
}

.popover.bottom .arrow:after
{
  border-top-width:0;
  top:1px
}

.popover.right .arrow:before,.popover.left .arrow:before
{
  top:-9px;
  border-color:transparent #bbb
}

.popover.right .arrow:after,.popover.left .arrow:after
{
  top:-8px;
  border-color:transparent #fff
}

.popover.right .arrow:before
{
  border-left-width:0
}

.popover.right .arrow:after
{
  border-left-width:0;
  left:1px
}

.popover.top
{
  margin-top:-8px
}

.popover.right
{
  margin-left:8px
}

.popover.bottom
{
  margin-top:8px
}

.popover.left
{
  margin-left:-8px
}

.popover .arrow,.popover .arrow:before,.popover .arrow:after
{
  content:'';
  display:block;
  height:0;
  position:absolute;
  width:0
}

.popover.left .arrow:before,.popover.left .arrow:after
{
  border-right-width:0
}

And html markup

<div class="popover right">
    <div class="popover-content">        
      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    </div>
    <div class="arrow"></div>
</div>

Hope it will be cleaned and added in 0.1.1 ;)