上一篇教程，明河讲解了写jquery插件的基本模板，今天将对Colortip这个jquery文字提示插件实现进行详解，你可以到第一篇教程下载Colortip。
（原作者的Colortip在IE6下存在二个bug，三角错位和提示框错位，明河将在日后教程中附上新的插件代码。）

难点解析：如何实现可以自由控制颜色的提示框

要控制提示框主体的边框颜色和背景颜色自然不难，难在如何自由控制三角部分的颜色，请看下图：

留意高亮的倒三角部分，你可以用firebug查看倒三角容器，点此进入demo，你就会发现这部分的三角并不是图片，而是使用纯css制作而成的！也只有在三角是由css构成的情况下，才可以自由控制其颜色。

这里就出现了一个有趣的知识点：使用css中的border产生三角形状。

border即边框，可以产生三角？别急，来看demo:

• 点此下载

示例中，明河做了个Colortip的提示框原型：

扩展阅读

• CSS border三角、圆角图形生成技术简介
• 纯CSS实现各类气球泡泡对话框效果
• Dotted&Dashed终极分析及IE6透明边框

知道了如何使用css产生三角，但又浮现出新的问题：如何给三角加上1像素的“边框”？
明河之所以给边框加上引号，是因为提示框的三角边框实际上不是边框，而是另外一个三角容器。
先回过头来，看下第一篇教程中明河曾说到当鼠标滑过容器时产生的提示款结构如下：

留意下其中的：

这二个空的容器起到的是什么作用呢？
原来这二个span都是三角，.pointyTip三角宽度为12px，颜色与提示框主体背景颜色一样，而. pointyTipShadow三角宽度为14px，放在.pointyTip的下面，颜色与提示框主体边框颜色一样，就产生边框了错觉！
这里贴出第四个demo的代码：

（与Colortip有些不同，Colortip是把提示框放在a内部，明河为了方便放在了a之下，提示框的类名我改成yitip）

……代码看上去不少，其实你只要理解border生成三角，剩下的代码主要还是用于调整位置。

解决了颜色控制这个难点，Colortip接下来代码实现就难度不大了，明河在代码内页加了注释，下一篇教程，明河主要讲解思路，Colortip这个插件并不完美，还有很大改进空间，明河这二天在进行改写，日后将介绍jquery插件的高级技巧。