jQuery覆盖默认验证错误消息显示（Css）Popup / Tooltip之类的

Question

我试图用div而不是标签来越过默认的错误消息标签。我也看过this post，并了解如何做到这一点，但我对CSS的限制令我难以忘怀。我如何像其中一些示例一样显示：

Example #1 (Dojo) - 必须输入无效输入才能看到错误显示 Example #2

下面是一些示例代码，它将错误标签覆盖为div元素

$(document).ready(function(){
            $("#myForm").validate({
                rules: {
                    "elem.1": {
                        required: true,
                        digits: true
                    },
                    "elem.2": {
                        required: true
                    }
                },
                errorElement: "div"
            });                  
        });

现在我对css部分感到茫然，但现在它是：

div.error {
        position:absolute;
        margin-top:-21px;
     margin-left:150px;
     border:2px solid #C0C097;
        background-color:#fff;
        color:white;
        padding:3px;
        text-align:left;
        z-index:1;
        color:#333333;
     font:100% arial,helvetica,clean,sans-serif;
     font-size:15px;
     font-weight:bold;  
    }

更新：

好吧我现在正在使用这个代码，但是弹出窗口上的图像和位置比边框大，可以调整为动态高度吗？

if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
   element = element.parent();

   offset = element.offset();
   error.insertBefore(element)
   error.addClass('message');  // add a class to the wrapper
   error.css('position', 'absolute');
   error.css('left', offset.left + element.outerWidth());
   error.css('top', offset.top - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox
} else {
   // Error placement for single elements
   offset = element.offset();
   error.insertBefore(element)
   error.addClass('message');  // add a class to the wrapper
   error.css('position', 'absolute');
   error.css('left', offset.left + element.outerWidth());
   error.css('top', offset.top - (element.height() / 2));
}

css与下面相同（你的css代码）

HTML

<span>
<input type="radio" class="checkbox" value="P" id="radio_P" name="radio_group_name"/>
<label for="radio_P">P</label>
<input type="radio" class="checkbox" value="S" id="radio_S" name="radio_group_name"/>
<label for="radio_S">S</label>
</span>

Answer 1

如果你能提供一些理由说明为什么你需要用div替换标签，那肯定会有帮助......

你也可以粘贴一个有用的样本（http://dpaste.com/或http://pastebin.com/）