Custom tooltip not displaying in correct position

I have a custom tooltip displaying on a graph. The tooltip arrow mark is to the right of where it should display. What am I doing wrong?

Please see the image here:

http://imageshack.开发者_StackOverflow社区us/photo/my-images/13/arrowmark.png/

This is my CSS:

.mouse-value {
    font-size: 14px;
    font-weight:bold;
}
.mouse-value:after {
    content: "";
    border-color: #FFFF99 transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    width: 0;
    height: 0;
    position: absolute;
    bottom: -40px;
    left: 10px
}

Seems position is right for the bottom left corner, try adjusting left and bottom