具体调用代码:
复制代码 代码如下:
其实现过程如下:1、首先我们在photoshop中设计出提示框的形状及背景。
2、我们将背景切成三个部分,top、main、bottom
top:
main:
bottom:
3、定义提示框的css文件
复制代码 代码如下:
.tooltip{
position:absolute; height:200px;
width:300px;
padding:10px;
}
.tooltip_main{
background-image:url(images/tooltip_main.png);
background-position:center;
background-repeat:repeat-y;
padding-left:30px;
padding-right:30px;
color:#c00;
font-weight:bold;
}
.tooltip_top{
width:300px;
height:40px;
background-image:url(images/tooltip_top.png);
background-repeat:no-repeat;
background-position:bottom;
}
.tooltip_bottom{
width:300px;
height:20px;
background-image:url(images/tooltip_bottom.png);
background-repeat:no-repeat;
background-position:top;
}
4、创建tooltip类,其实现如下:
复制代码 代码如下:
var tooltip = {};
tooltip.show = function(msg,obj){
$('#'+obj).after(''
+'
'
+''+msg+'
'
+'
'
+'
');
//调整位置
var objoffset = $('#'+obj).offset();
objoffset.left-=25;
objoffset.top-=10;
$('#tooltip_'+obj).offset(objoffset);
//点击消失
$('#tooltip_'+obj).click(function(){
$(this).hide();
$('#'+obj).focus();
});
}