给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;
}