给jQuery Validate添加一个好看点的提示框。

弄个箭头是不是会更好？如果只有一层结构，那么箭头只能用背景图实现，但是我又不想用图片，没想到办法~有高人帮忙写一写看看。

 

$(form).validate({
				errorElement:'div',
				errorPlacement: function(error, element) {
					error.addClass('tooltip tooltip-inner');
					element.after(error);
					var pos = $.extend({}, element.offset(), {
						width: element.outerWidth()
					  , height: element.outerHeight()
					  }),
					  actualWidth = error.outerWidth(),
					  actualHeight = error.outerHeight();
					error.css({display:'block',opacity:'0.8',top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2});
				},
				highlight: function(element, errorClass) {
					//高亮显示
					$(element).addClass(errorClass);
					$(element).parents('li:first').children('label').addClass(errorClass);
				},
				unhighlight:function(element, errorClass){
					$(element).removeClass(errorClass);
					$(element).parents('li:first').children('label').removeClass(errorClass);
				}
			});

 

 

 

.tooltip {
  position: absolute;
  z-index: 1020;
  display: block;
  visibility: visible;
  padding: 5px;
  font-size: 11px;
  opacity: 0;
  filter: alpha(opacity=0);
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

form input.error{
	color:#F00;
	border: 1px solid #CE7979;
	background:#FFF7FA;
}
form label.error{
	color:#F00;
}