tips.js提示框插件

<! DOCTYPE html>

< html >

     < head >

         < title >demo</ title >

         < meta charset = "UTF-8" >

         < script type = "text/javascript" src = "js/jquery.js" ></ script >

         < script type = "text/javascript" src = "js/jquery.tips.js" ></ script >

         < style >

         #myinput{position:relative;top:200px;left:200px;}

         </ style >

         < script type = "text/javascript" >

             $(function (){

                 $('#myinput').click(function(){

                     $(this).tips({

                         side:1,  //1,2,3,4 分别代表 上右下左

                         msg:'上方弹出消息，3秒后自动消失，鼠标悬浮时，自动延时',//tips的文本内容

                         color:'#FFF',//文字颜色，默认为白色

                         bg:'#FD9720',//背景色，默认为红色

                         time:3,//默认为2 自动关闭时间 单位为秒 0为不关闭 （点击提示也可以关闭）

                         x:0,// 默认为0 横向偏移 正数向右偏移 负数向左偏移

                         y:0 // 默认为0 纵向偏移 正数向下偏移 负数向上偏移

                     }).tips({

                         side:2,

                         msg:'右方弹出消息，5秒后自动消失，鼠标悬浮时，自动延时',

                         bg:'#AE81FF',

                         time:5

                     }).tips({

                         side:3,

                         msg:'下方弹出消息，7秒后自动消失，鼠标悬浮时，自动延时',

                         bg:'#307FC1',

                         time:7

                     }).tips({

                         side:4,

                         msg:'左方弹出消息，不自动消失，鼠标点击才会消失',

                         time:0

                     });

                 });

             });

 

         </ script >

     </ head >

     < body >

         < input id = "myinput" />

     </ body >

</ html >