需要CSS样式与图像中显示的相同

Question

我有一个工具提示，我希望看到工具提示的外观，如图所示 如图所示

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

我试过这种方式，但它不起作用 任何人都可以让我知道如何实现这个目标吗？

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

}

Answer 1

你可以这样做：

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

和风格：

#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;
}