不用javascript只用div+css實現的toolTip做法 ( ie上的z-index )

最近都在忙著做系所網頁，在某一個頁面上想做出類似ToolTip的功能，本來使用了jquery的TooTip plugin來實現，不過發現到了原來可以用css來實現，代碼少了很多。

css:
.userpoint{
width:100px;
float:left;
cursor:pointer;
}
.tooltip{
position:relative;//最重要的
border:solid 1px;
background-color:blue;
display:none;
width:150px;
left:5px;
top:-5px;
z-index:3000;//最重要的
}
.userpoint:hover .tooltip,tooltip:hover{//最重要的
display:block;
}

html的內容:
< div class="userpoint"> point to me < div class="tooltip" >這是用css來實現的功能</div></div>

效果：

point to me

這是用css來實現的功能

point to me

這是用css來實現的功能

point to me

這是用css來實現的功能

這樣就實現了，是不是超簡單呢？
這只是基本的范例，很難看吧，但是有很大的自由度，除了標示最重要的更改要注意之外，其他都可以改，包括顏色，大小等等，可以在tooltip的div再加入任何東西。
比起要用jquery的ToolTip plugin，壓縮后還有整整5kb多，而且自由度又受限制（要照著一定格式），我之前因為要達到某些效果而又要照著格式，結果違背了網頁標準。
而用css甚至不需要1kb,又符合網頁標準
這就給我上了一課，不要什么都靠javascript。

*要留意的是z-index在ie上有不同的處理方法，我也不是很清楚，之前我是吧tooltip的parent(userpoint)的position是設為absolute的，結果z-index:3000就變無效了，發現tooltip一定要設為relative,他的parent一定要是預設的static,這樣z-index才能產生效果，當然，ie以外的瀏覽器是沒這些問題的。


如果不行的話試著在html上面加上
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
或
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

（本文乃原創文章，轉載請注明出處）