tips调整，注册页

@@ -5,7 +5,7 @@
                 JOIN YOHO!BLK
             </div>
         </li>
-        <li class="clearfix relative" data-index="0">
+        <li class="clearfix" data-index="0">
             <select id="region" class="region" name="region">
                 {{#each region}}
                     <option {{#if selected}}selected="selected"{{/if}} value="{{areaCode}}">{{name}}</option>
@@ -15,13 +15,27 @@
                 <span id="country-code" class="country-code">{{location}}</span>
                 <input value="" id="phone-num" class="input phone-num" type="text" name="phoneNum"
                        placeholder="Phone Number" autocomplete="off">
+
+                <div class="tips phone-num-tips hide">
+                    <div class="triangle"></div>
+                    <div class="rectangle"></div>
+                </div>
+
             </div>
 
         </li>
 
         <li class="clearfix" data-index="1">
-            <input id="captcha" class="input captcha" type="text" name="captcha" placeholder="图形验证码"
-                   autocomplete="off" maxlength="4">
+
+            <div class="img-captcha-wrapper">
+                <input id="captcha" class="input captcha" type="text" name="captcha" placeholder="图形验证码"
+                       autocomplete="off" maxlength="4">
+
+                <div class="tips img-captcha-tips hide">
+                    <div class="triangle"></div>
+                    <div class="rectangle"></div>
+                </div>
+            </div>
 
             <div class="left captcha-component">
                 <img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt="">
@@ -31,8 +45,17 @@
         </li>
 
         <li class="clearfix" data-index="2">
-            <input id="msg-captcha" class="input msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码"
-                   autocomplete="off" maxlength="4">
+
+            <div class="sms-captcha-wrapper">
+                <input id="msg-captcha" class="input msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码"
+                       autocomplete="off" maxlength="4">
+
+                <div class="tips sms-captcha-tips hide">
+                    <div class="triangle"></div>
+                    <div class="rectangle"></div>
+                </div>
+
+            </div>
             <a id="send-captcha" class="btn send-captcha disable">获取短信验证码</a>
         </li>
 
@@ -45,8 +68,17 @@
         </li>
 
         <li class="clearfix">
-            <input id="pwd" class="input pwd" name="pwd" placeholder="Password" autocomplete="off" maxlength="20"
-                   type="password">
+
+            <div class="pwd-wrapper">
+
+                <input id="pwd" class="input pwd" name="pwd" placeholder="Password" autocomplete="off" maxlength="20"
+                       type="password">
+
+                <div class="tips pwd-tips hide">
+                    <div class="triangle"></div>
+                    <div class="rectangle"></div>
+                </div>
+            </div>
         </li>
 
         <li class="clearfix">
@@ -62,7 +94,7 @@
             <input name="refer" id="refer" type="hidden" value="{{referUrl}}">
             <div style="width: 100%;text-align: center">
                 <input id="register-btn" class="btn btn-fixed-height disable" type="submit" value="{{regBtnText}}"
-                       >
+                >
             </div>
         </li>
         <li class="clearfix quick-login-container">
@@ -77,11 +109,6 @@
         <b></b>
     </div>
 
-    <div class="tips hide">
-        <div class="triangle"></div>
-        <div class="rectangle"></div>
-    </div>
-
     <input name="" type="hidden" id="open-id" value="{{openId}}"/>
     <input name="" type="hidden" id="source-type" value="{{sourceType}}"/>
 </div>

@@ -9,8 +9,7 @@ var $ = require('yoho-jquery'),
     computeComplex = require('../common/pwd-strength'),
     EventProxy = require('yoho-eventproxy');
 
-var $registerPage = $('.register-page'),
-    $phone = $('#phone');
+var $registerPage = $('.register-page');
 
 var $phoneNumInput = $('#phone-num'),
     $smsCaptchaInput = $('#msg-captcha'),
@@ -22,6 +21,7 @@ var $phoneNumInput = $('#phone-num'),
     $regionCodeText = $('#country-code'),
     $registerBtn = $('#register-btn');
 
+var $phone = $phoneNumInput;
 var second = 60;
 var ep = new EventProxy();
 
@@ -35,25 +35,18 @@ var checkboxIcon = {
     unchecked: ''
 };
 
-var $errTip = $('.tips'),
-    $errMsg = $errTip.find('.rectangle');
-
 require('yoho-jquery-placeholder');
 
 function errTip(ele, msg) {
-    var topLeft = ele.offset();
+    var $errTip = ele.next('.tips');
+    var $errMsg = $errTip.find('.rectangle');
 
     $errMsg.text(msg);
-    return $errTip.css({
-        top: topLeft.top + ele.height() - 2,
-        left: topLeft.left,
-        width: ele.width() + 2,
-        height: ele.height
-    }).removeClass('hide');
+    return $errTip.removeClass('hide');
 }
 
-function hideTip() {
-    return $errTip.addClass('hide');
+function hideTip(ele) {
+    return ele.next('.tips').addClass('hide');
 }
 
 setTimeout(function() {
@@ -162,7 +155,7 @@ function validateImgCaptcha() {
     }
 
     return validate().then(function() {
-        hideTip();
+        hideTip($imgCaptchaInput);
         ep.emit('captcha-img', true);
     }).fail(function() {
         ep.emit('captcha-img', false);
@@ -230,7 +223,7 @@ function validateSMSCaptcha() {
     }
 
     return validate().then(function() {
-        hideTip();
+        hideTip($smsCaptchaInput);
         ep.emit('captcha-sms', true);
     }).fail(function() {
         ep.emit('captcha-sms', false);
@@ -284,7 +277,7 @@ function validatePhoneNum() {
     }
 
     return validate().then(function() {
-        hideTip();
+        hideTip($phone);
         ep.emit('phone-num', true);
     }).fail(function() {
         ep.emit('phone-num', false);
@@ -322,7 +315,7 @@ function validatePassword() {
     }
 
     return validate().then(function() {
-        hideTip();
+        hideTip($passwordInput);
         ep.emit('password', true);
     }).fail(function() {
         ep.emit('password', false);
@@ -450,11 +443,15 @@ exports.init = function() {
     // 验证手机输入
     $phoneNumInput.on('keyup blur', function() {
         validatePhoneNum();
+    }).on('focus', function() {
+        hideTip($phoneNumInput);
     });
 
     // 验证图形输入
     $imgCaptchaInput.on('keyup blur', function() {
         validateImgCaptcha();
+    }).on('focus', function() {
+        hideTip($imgCaptchaInput);
     });
 
     // 图形验证通过时，发送短信按钮可点击
@@ -469,6 +466,8 @@ exports.init = function() {
     // 验证短信输入
     $smsCaptchaInput.on('keyup blur', function() {
         validateSMSCaptcha();
+    }).on('focus', function() {
+        hideTip($smsCaptchaInput);
     });
 
     // 验证密码输入
@@ -478,6 +477,8 @@ exports.init = function() {
         validatePassword().always(function() {
             validatePasswordComplexLocal($this);
         });
+    }).on('focus', function() {
+        hideTip($passwordInput);
     });
 
     // 服务条款

@@ -16,29 +16,28 @@ var jQuery = require('yoho-jquery'),
 
     var methods = {
         show: function() {
-            var $parent = this.parent(),
-                topLeft = $parent.offset(),
-                $tips = this.find('.tips');
+            var $this = this,
+                $tips = $this.next('.tips');
 
             if ($tips.length !== 0) {
                 $tips.find('.rectangle').text(arguments[0]).removeClass('hide');
             } else {
-                $parent.append(tplFn({content: arguments[0]}));
-                $tips = $parent.find('.tips').removeClass('hide');
+                $this.after(tplFn({content: arguments[0]}));
+                $tips = $this.next('.tips').removeClass('hide');
                 $tips.css({
-                    top: $parent.height() - 2,
-                    left: topLeft.left,
-                    width: this.width() + 2,
-                    height: this.height
+                    top: $this.height() - 2,
+                    left: 0,
+                    width: $this.width() + 2,
+                    height: $this.height
                 });
             }
 
             return $tips;
         },
         hide: function() {
-            var $parent = this.parent();
+            var $tips = this.next('.tips');
 
-            return $parent.find('.tips').addClass('hide');
+            return $tips.addClass('hide');
         }
 
     };

@@ -173,10 +173,21 @@
         .agree-terms {
             cursor: pointer;
             .small {
-                @mixin small
-            ;
+                @mixin small;
             }
         }
+
+        .img-captcha-wrapper {
+            width: $captcha;
+        }
+
+        .sms-captcha-wrapper {
+            width: $captcha;
+        }
+
+        .pwd-wrapper {
+            width: 100%;
+        }
     }
 }
 

 .tips {
     position: absolute;
-    top: 41px;
+    top: 40px;
     width: inherit;
+    z-index: 3;
 
     .rectangle {
         width: 100%;