Tip是頁面設計中最常見不過的組件，但要從無到有實現一個優秀的tip組件並不是一件容易的事情。本文介紹了本人編寫的tip組件，並提供源碼供下載。您可以直接使用，但希望您能保留代碼中的作者注釋。: )
本tip組件具有以下特性：
1、兼容各主流瀏覽器。
2、高度自適應。
3、有上方向和下方向兩種tip。
4、css sprite(合圖，只用一張背景圖）。
5、在現代瀏覽器中具有陰影和圓角效果。
6、可擴展性：可以通過擴展類來調整tip上小箭頭的位置和內容的寬度。
相信讀者結合源碼和組件展示效果能很快領會以上所列各點的含義，這里就不贅訴了。: )
本組件展示效果如下圖所示：
最后粘出源碼如下：
<!--
作者：andycja
http://www.cnblogs.com/andycja/
-->
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Tip </ title >
< style type ="text/css" >
body { font : 12px/1.5 tahoma,arial,\5b8b\4f53 ; color : #505050 ; }
/* tip */
.ys_tip .arrow_up,.ys_tip .arrow_down,.ys_tip .btn_close { background : url("ys_tip.gif") no-repeat scroll transparent ; }
.ys_tip { position : absolute ; z-index : 99 ; }
.ys_tip .arrow_up { font-size : 4px ; display : block ; width : 12px ; height : 7px ; position : relative ; top : 1px ; z-index : 99 ; } /* font-size:4px; for ie6 */
.ys_tip .arrow_down { font-size : 4px ; display : block ; width : 12px ; height : 7px ; position : relative ; bottom : 1px ; background-position : -16px 0 ; }
.ys_tip .content { zoom : 1 ; position : relative ; padding : 8px 16px ; border : 1px solid #BEB49C ; background-color : #fefbe4 ;
-webkit-border-radius : 3px ; -moz-border-radius : 3px ; -webkit-box-shadow : 0px 0px 2px #555 ; -moz-box-shadow : 0px 0px 2px #555 ; } /* fzoom:1; for ie6 */
.ys_tip .btn_close { position : absolute ; right : 3px ; top : 4px ; width : 12px ; height : 12px ; background-position : -48px 0 ; }
.ys_tip .btn_close:hover { background-position : -32px 0 ; }
.ys_tip .not_show { text-decoration : underline ; }
/* feedback tip */
.feedback { position : relative ; }
.ys_tip_feedback { left : -108px ; top : 16px ; width : 142px ; }
.ys_tip_feedback .arrow_up { margin-left : 113px ; }
/* delivery_fee tip */
.delivery_fee { zoom : 1 ; position : relative ; }
.ys_tip_delivery_fee { left : -108px ; bottom : 15px ; width : 199px ; }
.ys_tip_delivery_fee .arrow_down { margin-left : 113px ; }
</ style >
</ head >
< body >
< div style ="height:179px;margin-top:50px;" >
如果有問題，可以反饋給我們。如果有問題，可以
< span class ="feedback" >
< a href ="javascript:void 0;" >反饋 </ a >
< div class ="ys_tip ys_tip_feedback" >
< span class ="arrow_up" ></ span >
< div class ="content clearfix" >
< a class ="btn_close" href ="javascript:void 0;" id ="closeFeedbackTip" ></ a >
請問有什么問題要反饋嗎？ < a href ="javascript:void 0;" class ="not_show" >不再顯示 </ a >
</ div >
</ div >
</ span >
給我們。
</ div >
< div >
請問關於運費的問題。請問關於運費的問題。請問關於
< span class ="delivery_fee" >
< a href ="javascript:void 0;" >運費 </ a >
< div class ="ys_tip ys_tip_delivery_fee" >
< div class ="content clearfix" >
< a class ="btn_close" href ="javascript:void 0;" ></ a >
運費不受油價影響，也不受時間影響，只跟路程相關。計算公式如下：a*b=c < a href ="javascript:void 0;" class ="not_show" id ="notShowFeedbackTip" >不再顯示 </ a >
</ div >
< span class ="arrow_down" ></ span >
</ div >
</ span >
的問題。
</ div >
</ body >
</ html >
作者：andycja
http://www.cnblogs.com/andycja/
-->
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Tip </ title >
< style type ="text/css" >
body { font : 12px/1.5 tahoma,arial,\5b8b\4f53 ; color : #505050 ; }
/* tip */
.ys_tip .arrow_up,.ys_tip .arrow_down,.ys_tip .btn_close { background : url("ys_tip.gif") no-repeat scroll transparent ; }
.ys_tip { position : absolute ; z-index : 99 ; }
.ys_tip .arrow_up { font-size : 4px ; display : block ; width : 12px ; height : 7px ; position : relative ; top : 1px ; z-index : 99 ; } /* font-size:4px; for ie6 */
.ys_tip .arrow_down { font-size : 4px ; display : block ; width : 12px ; height : 7px ; position : relative ; bottom : 1px ; background-position : -16px 0 ; }
.ys_tip .content { zoom : 1 ; position : relative ; padding : 8px 16px ; border : 1px solid #BEB49C ; background-color : #fefbe4 ;
-webkit-border-radius : 3px ; -moz-border-radius : 3px ; -webkit-box-shadow : 0px 0px 2px #555 ; -moz-box-shadow : 0px 0px 2px #555 ; } /* fzoom:1; for ie6 */
.ys_tip .btn_close { position : absolute ; right : 3px ; top : 4px ; width : 12px ; height : 12px ; background-position : -48px 0 ; }
.ys_tip .btn_close:hover { background-position : -32px 0 ; }
.ys_tip .not_show { text-decoration : underline ; }
/* feedback tip */
.feedback { position : relative ; }
.ys_tip_feedback { left : -108px ; top : 16px ; width : 142px ; }
.ys_tip_feedback .arrow_up { margin-left : 113px ; }
/* delivery_fee tip */
.delivery_fee { zoom : 1 ; position : relative ; }
.ys_tip_delivery_fee { left : -108px ; bottom : 15px ; width : 199px ; }
.ys_tip_delivery_fee .arrow_down { margin-left : 113px ; }
</ style >
</ head >
< body >
< div style ="height:179px;margin-top:50px;" >
如果有問題，可以反饋給我們。如果有問題，可以
< span class ="feedback" >
< a href ="javascript:void 0;" >反饋 </ a >
< div class ="ys_tip ys_tip_feedback" >
< span class ="arrow_up" ></ span >
< div class ="content clearfix" >
< a class ="btn_close" href ="javascript:void 0;" id ="closeFeedbackTip" ></ a >
請問有什么問題要反饋嗎？ < a href ="javascript:void 0;" class ="not_show" >不再顯示 </ a >
</ div >
</ div >
</ span >
給我們。
</ div >
< div >
請問關於運費的問題。請問關於運費的問題。請問關於
< span class ="delivery_fee" >
< a href ="javascript:void 0;" >運費 </ a >
< div class ="ys_tip ys_tip_delivery_fee" >
< div class ="content clearfix" >
< a class ="btn_close" href ="javascript:void 0;" ></ a >
運費不受油價影響，也不受時間影響，只跟路程相關。計算公式如下：a*b=c < a href ="javascript:void 0;" class ="not_show" id ="notShowFeedbackTip" >不再顯示 </ a >
</ div >
< span class ="arrow_down" ></ span >
</ div >
</ span >
的問題。
</ div >
</ body >
</ html >