Need CSS Styling same as shown in the Image

I have a tool tip , I want to have the look of the tooltip as shown in this image 开发者_如何学Python as shown

http://www.tiikoni.com/tis/view/?id=fa381ec

I have tried this way , but its not working could anybody please let me know how to achive this ?

.flotr-mouse-value {
    font-size: 10px;
    border: 45px solid #12a1da;

}

you can do it like this:

<div id="tooltip">
    <div class="contents">
        contents of the tooltip
    </div>
    <div class="arrow"></div>
</div>

and the style:

#tooltip {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 300px;
    height: 150px;
}
#tooltip div.contents {
    background: #ccc;    
    height: 150px;
    -moz-box-shadow: 3px 3px 3px #666;
    -webkit-box-shadow: 3px 3px 3px #666;
    box-shadow: 3px 3px 3px #666;
}

#tooltip div.arrow {
    width: 10px;
    height: 10px;
    position: absolute;
    left: 50px;
    bottom: -10px;
    background: url(arrow_down.gif) no-repeat;
    -moz-box-shadow: 3px 3px 3px #666;
    -webkit-box-shadow: 3px 3px 3px #666;
    box-shadow: 3px 3px 3px #666;
}