Web中的Tip组件实现

Tip组件下载

Tip是页面设计中最常见不过的组件，但要从无到有实现一个优秀的tip组件并不是一件容易的事情。本文介绍了本人编写的tip组件，并提供源码供下载。您可以直接使用，但希望您能保留代码中的作者注释。: )

本tip组件具有以下特性：

1、兼容各主流浏览器。
2、高度自适应。
3、有上方向和下方向两种tip。
4、css sprite(合图，只用一张背景图）。
5、在现代浏览器中具有阴影和圆角效果。
6、可扩展性：可以通过扩展类来调整tip上小箭头的位置和内容的宽度。

相信读者结合源码和组件展示效果能很快领会以上所列各点的含义，这里就不赘诉了。: )

本组件展示效果如下图所示：

最后粘出源码如下：

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 >