Colortip – jQuery文字信息提示插件簡介

2、效果搶鮮

您能夠狠狠地點擊這裏：Colortip信息提示插件demo

鼠標移到demo頁面的橙紅色連接上就會看到各類顏色的信息提示框啦！

3、如何使用

咱們須要用到一個CSS樣式文件，jQuery庫文件，還有就是插件js文件，完整的連接代碼以下：

<link rel="stylesheet" href="colortip/colortip-1.0-jquery.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="colortip/colortip-1.0-jquery.js"></script>

通常這類jQuery插件的使用都是很簡單的。最簡單的用法就是：選擇器.colorTip();，例如：

$("#test").colorTip();

要想有效果，貌似綁定的元素須要有title屬性，因此，上述代碼的效果就是，鼠標移到id爲test的元素上，會顯示黃色的提示框，提示框中的內容就是title屬性裏面的內容。

固然，你能夠專門指定彈框的顏色，此插件有六種不一樣的彈框顏色可供選擇，分別是：紅色(red)、綠色(green)、藍色(blue)、白色(white)、黃色(yellow)和黑色(black)。
例如demo的綁定代碼以下：

$(".demo a").colorTip({color:'yellow'});

就是顯示黃色的信息彈框。

細心的你應該發現，demo頁面裏的彈框不都是黃色的啊，還有綠色、藍色等，這是爲何呢？這是由於此插件還能夠經過class屬性指定彈出小框的顏色，以下圖所示：

此段連接樣式的顯示效果就是：

4、參考來源以及源文件下載

參考文章：Colortip – a jQuery Tooltip Plugin

原文的介紹很詳細，詳細到一點看的興趣也沒有，逐步分析CSS，而後分析插件是如何寫的，OMG！對於通常使用者而言，纔不會關心這些東東呢。此插件的小三角是使用CSS的border屬性生成的，關於CSS border的圖形生成技術，能夠參考個人「CSS border三角、圓角圖形生成技術簡介」一文，不過此插件原CSS文件並無兼顧IE6的border生成效果。

下載
英文原版打包源文件：colortips.zip(5.67K)

正如本文開頭提到的，原版源文件並無把IE6瀏覽器計算在內，因此IE6下的顯示是有問題的，一是border生成的三角有問題，二是彈出框的定位有問題。我對其CSS文件做了點簡單的修改，修復了IE6下的這些問題，因此，我我的是建議您下面的編輯版的源文件：

編輯版源文件下載：zxx.colortip.zip(5.96K)