<!
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
>