Basically, I changed the following style rules to remove 2 of the borders from your arrow, changed the z-index so the content in the tool tip is always on top, and removed overflow:hidden from your arrow class so the arrow could be displayed. So these rules:
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -15px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
tranform: rotate(45deg);
border-bottom:none;
border-right:none;
z-index:-1;
}
.arrow {
width: 170px;
height: 170px;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}