因为是自定义样式，所以 兼容所有浏览器版本，个人认为非常漂亮：网址www.cjrz.cn
CSS
1<style>2/*tooltip*//*CSS属性顺序按照 字母首字母 排列*/3.ui-slider-tooltip{background:#f5a455;border:1px solid #f5a455;color:#fff;display:block;text-align:left;padding:5px 3px 5px 5px;position:absolute;z-index:99999; }4.ui-corner-all{border-radius:3px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-toPRight:3px;-webkit-border-top-left-radius:3px 3px;-webkit-border-top-right-radius:3px 3px;-webkit-border-bottom-right-radius:3px 3px;-webkit-border-bottom-left-radius:3px 3px;}5.ui-tooltip-pointer-down{border-bottom-width:0;border-left:7px dashed transparent;border-right:7px dashed transparent;border-top:8px solid #f5a455;bottom:-8px;display:block;height:0;left:18%;margin-left:-7px;position:absolute;width:0;}6.ui-tooltip-pointer-down-inner{border-left:6px dashed transparent;border-right:6px dashed transparent;border-top:7px solid #f5a455;left:-6px;top:-9px;position:absolute; }7.tip{font-size:9pt;line-height:18px;}8.error{border:1px solid rgb(223, 74, 67);}91011</style>
前台：
1<inputtype="text"id="userName"/>2<inputtype="button"onclick="submitOneClickApply()"/>
js:
1functionsubmitOneClickApply() {23varusername = $("#userName").val();45if(username == "") {6$("#userName").rzAlertTips({ flagInfo: '请输入联系人'});//$("#userName").rzAlertTips(); 只要你的 placeholder="请输入联系人" 它就能提示“请输入联系人”}
7}
调用的js:
1<script type="text/javascript">2(function($) {3jQuery.fn.extend({4rzAlertTips:function(settings) {5$(this).each(function() {6//初始化配置信息7varoptions =jQuery.extend({8flagCss: "tip",9flagWidth: $(this).outerWidth(),10flagInfo: $(this).attr("placeholder"),11isAnimate:true12},13settings);14if(!options.flagInfo) {15return;16}17$(this).removeAttr("title");18varobj = $(this);19varoToolTip =null;20varfun_show =function() {21//设置提示信息最小宽度为1632223options.flagWidth = "auto";//(parseInt(options.flagWidth) < 100) ? 163 : parseInt(options.flagWidth);+ "px"24varoTip = $("<div class='ui-slider-tooltip ui-corner-all' id='tipWrap_" + $(this).attr("id") + "'></div>");25varoPointer = $("<div class='ui-tooltip-pointer-down'><div class='ui-tooltip-pointer-down-inner'></div></div>");26varoTipInfo = $("<div>" + options.flagInfo + "</div>").attr("class", options.flagCss).css("width", options.flagWidth);27//合并提示信息28oToolTip =$(oTip).append(oTipInfo).append(oPointer);29if($("#tipWrap_" + $(this).attr("id")).length > 0) $("#tipWrap_" + $(this).attr("id")).remove();30//添加淡入效果31if(options.isAnimate) {32$(oToolTip).fadeIn("slow");33}34$(obj).after(oToolTip);35//计算提示信息的top、left和width //position.top36varposition =$(obj).position();37varoTipTop = eval(position.top - $(oTip).outerHeight() - 8);38varoTipLeft =position.left;394041$(oToolTip).css("top", oTipTop + "px").css("left", oTipLeft + "px");42};43fun_show();44$('.error').removeClass('error');45$(this).addClass("error");46setTimeout(function() { $(oToolTip).remove(); }, 3000);4748});49returnthis;50}51})(jQuery);52</script>