Using jQuery UI Tooltip with custom arrow causes tooltip issue

I'm using Tooltip custom style plugin...

Now I want to display my tool tip message as displayed on these sites and as shown in the photo (e.g., with an arrow to be part of the tooltip):

• Example link
• Example link

I try to apply several CSS rules, but I'm still not able to get it to look the way I want... please help me. Here is my CSS code:

body .ui-tooltip {
  border-width:0;
}

.ui-tooltip,.arrow:after {
  background:black;
  border:0 solid white;
}

.ui-tooltip {
  padding:10px;
  color:white;
  border-radius:5px;
  font-family:Verdana, sans-serif;
  font-size:12px;
  text-transform:none;
}

.arrow {
  width:70px;
  height:16px;
  position:absolute;
  left:0!important;
  margin-left:-25px;
  top:55%;
}

.arrow.top {
  top:-16px;
  bottom:auto;
}

.arrow.left {
  left:20%;
}

.arrow:after {
  content:"";
  position:absolute;
  left:20px;
  top:-20px;
  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);
}

.arrow.top:after {
  bottom:-20px;
  top:auto;
}

.ui-tooltip {
  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  filter:alpha(opacity=70);
  opacity:0.7;
}

My display when I apply the above CSS code does not display a full tooltip:

But I want it to look like this, full size:

My CSS code arrow has problems and it's doesn't look like the example I provided.

Edit:

Arrow problem is ok now... but if you see wanted display it's not same as i want

.ui-tooltip {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity:0.7;
} 

I guess they haven't above CSS code... could you any one suggest to how their transparent work