#tooltip{
text-align: center;
color: #fff;
background: #3298ff;
position: absolute;
z-index: 100;
padding: 10px;
}

#tooltip:after{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #3298ff;
content: '';
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -10px;
}

#tooltip.top:after{border-top-color: transparent;border-bottom: 10px solid #3298ff;top: -20px;bottom: auto;}
#tooltip.left:after{left: 10px;margin: 0;}
#tooltip.right:after{right: 10px;left: auto;margin: 0;}