You don't need to add the extra class arrow
to the tooltip. You can use the :before
pseudo class on the class .ui-tooltip
.
.ui-tooltip {
padding: 10px 12px;
color: Black;
font: 8pt "Helvetica Neue", Sans-Serif;
max-width: 150px;
background: white;
border: 1px solid #999;
position: absolute;
}
.ui-tooltip:before {
content: "";
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #999;
position: absolute;
top: 50%;
margin-top: -10px;
margin-left: -22px;
}
Also check this the updated Fiddle.