Jquery 错误提示插件

这是一个简单的输入框错误提示插件，可拓展！

.jq-error{
    font-size:12px;
    min-width:150px;
    width:auto;
    max-width:350px;
    line-height:20px;
    position:relative;
    border:1px solid #fe4e4c;
    background-color:#fe4e4c;
    color:white;
    margin-top:5px;
    padding: 4px 10px;
}

.error-bottom > div{
    width:8px;
    height:8px;
    position:absolute;
    background-color:#fe4e4c;
    transform:rotate(45deg);
    margin-top:-7px;
}

.error-top{
    position:absolute;
    margin-top:-67px;
}

.error-top > div{
    width:8px;
    height:8px;
    position:absolute;
    background-color:#fe4e4c;
    transform:rotate(45deg);
   bottom:-5px;
}

.error-right{
    float: right;
    margin-left: 10px;
    margin-top:0;
}

.error-right > div{
    width:8px;
    height:8px;
    position:absolute;
    background-color:#fe4e4c;
    transform:rotate(45deg);
    left:-5px;
    margin-top:5px;
}

(function ($) {
    'use strict';
    $.fn.error = function (options) {
        var dom = $(this);

        //错误提示框位置:errorStyle
        /**
         * error向上显示：'error-top'
         * error向右显示：'error-right'
         * error向下显示：'error-bottom'
         * error向左显示：'error-left'
         **/

        var default_option = {
            errorStyle: 'error-bottom',
            msg: (typeof(options) == 'string' ? options : options.msg)
        };

        default_option = $.extend(default_option, options);//合并用户输入参数

        //错误提示模板
        var error_tpl = '<div class="jq-error '+ default_option.errorStyle +'"><div></div>'+
                         default_option.msg +'</div>';

        if (dom.next('div').hasClass('jq-error')){
             dom.next('div').remove();
        }

        //插入错误提示
        dom.after(error_tpl);
    };
})(jQuery);

使用方法：

$('#txt_error_top').on('blur', function () {
    $(this).error({errorStyle: 'error-top', msg: '这是一个向上弹出的提示'});
}); 

$('#txt_error_right').on('blur', function () {
    $(this).error({errorStyle: 'error-right', msg: '这是一个向右弹出的提示'});
});

效果：

aaarticlea/png;base64,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" alt="" />