最终效果图：

基本原理

首先设置一个普通的带背景色的div框，然后用上一篇文章中得到的三角形图标将div框设置为相对定位模式。三角形图标被设置为绝对定位，位置被调整到相对于div框的适当位置。这样，我们得到了一个基本的工具提示，但是没有边框看起来总是不舒服。我们可以为div框设置边框，这并不难，但是如何为三角形图标设置边框呢？这里我们巧妙的叠加了两个不同颜色的三角形图标，位置错开1px，这样就盖住了底部三角形的上边框，只露出了左右边框部分。当叠加在一起时，我们得到一个看起来像边框的三角形图标。

逐步地

1.首先定义一个相对定位的box div:

div class='工具提示'/divcss:工具提示{位置position:relative宽度width:300px高度：80 px；线高：60 px；背景# D7E7FC边界半径：4 px；}效果：

2.接下来，利用上一篇文章的知识，我们在div框中添加一个三角形图标：

Div class='工具提示' div class='箭头'/div/div三角形图标css:arrow { position:absolutecolor: # D7E7FC宽度： 0px；height:0px行高： 0px；边框-宽度： 20px 15px 0；border-style:实线虚线；边框-左侧-颜色：透明；边框-右侧-颜色：透明；bottom :-20px；右： 50%；}效果：

它已经成型，甚至可以直接使用。但是如果工具提示的背景色与目标的背景色重合，我们就很难区分，需要为其定义边框。

3.添加边框：工具提示{位置position:relative宽度width:300px高度：80 px；线高：60 px；背景# D7E7FCborder:1px固体# A5C4EC边界半径：4 px；}效果：

盒子有边框效果，但是下面的小三角形没有得到“保护”，这对于处女座来说简直是无法忍受的！

4.在“小三角”上系一条松紧带。正如我们在解释原理之前所说，我们需要使用两个三角形的叠加方法。首先，我们定义两个三角形的div，一个背景色与框的边框颜色相同，另一个背景色与框的背景色一致：

Div class='工具提示' div class='箭头箭头-边框'/div div class='箭头箭头-BG'/div/div CSS的定义如下：arrow { position:absolute宽度： 0px；height:0px行高： 0px；边框-宽度： 20px 15px 0；border-style:实线虚线；边框-左侧-颜色：透明；边框-右侧-颜色：透明；}.箭头边框{ color: # A5C4ECbottom :-20px；右： 50%；}.箭头-BG { color : # D7E7fc；bottom :-19px；右： 50%；}注意：底部位置之间的差异。箭头bg和。箭头边框为1px(可根据边框宽度进行调整)。两个div的顺序不能颠倒。让我们来看看最后的效果：

好的。你完蛋了。在ie6下运行。完全兼容！

在下一篇文章中，我们将通过实现jquery工具提示插件来改进工具提示