tips问题，第三方登录首页

@@ -27,7 +27,7 @@
                         <input id="phone-num" name='mobile' class="phone-num" type="text"
                                placeholder="Phone Number">
 
-                        <div class="tips">
+                        <div class="tips hide">
                             <div class="triangle"></div>
                             <div class="rectangle"></div>
                         </div>
@@ -39,9 +39,18 @@
             <li class="clearfix">
 
                 <div id="img-captcha-component" class="img-captcha-component">
+
+                    <div class="img-captcha-wrapper">
                         <input id="verifyCode" name='verifyCode' class="input left" name="code" type="text"
                                placeholder="图形验证码">
 
+                        <div class="tips hide">
+                            <div class="triangle"></div>
+                            <div class="rectangle"></div>
+                        </div>
+
+                    </div>
+
                     <div class="refresh left">
                         <img class="left img-captcha" src="{{imgCaptcha}}">
                         <span class="img-captcha-refresh iconfont left ctrl">&#xe613;</span>
@@ -51,9 +60,17 @@
 
             <li class="clearfix">
                 <div id="sms-captcha-component" class="sms-captcha-component">
+
+                    <div class="sms-captcha-wrapper">
                         <input id="sms-captcha-input" name='code' class="input left sms-captcha-input" type="text"
                                placeholder="短信验证码">
 
+                        <div class="tips hide">
+                            <div class="triangle"></div>
+                            <div class="rectangle"></div>
+                        </div>
+                    </div>
+
                     <div class="left">
                         <a class="btn send disable sms-captcha-send">获取短信验证码</a>
                     </div>
@@ -68,11 +85,6 @@
         </ul>
     </div>
 
-    <div class="tips hide">
-        <div class="triangle"></div>
-        <div class="rectangle"></div>
-    </div>
-
     <div>
         <input id="openId" name='openId' type="hidden" value="{{openId}}">
         <input id="sourceType" name='sourceType' type="hidden" value="{{sourceType}}">

@@ -13,7 +13,6 @@ var $regionCodeText = $('#region-code'),
     $imgCaptchaCtrl = $('.img-captcha-refresh'),
     $smsCaptchaInput = $('#sms-captcha-input'),
     $smsCaptchaCtrl = $('.sms-captcha-send'),
-    $phone = $('#phone'),
     $nextBtn = $('#validate-phone-next');
 
 var $bindsetpwdForm = $('#bindsetpwd'),
@@ -27,19 +26,16 @@ var $refer = $('#refer');
 var second = 60,
     ep = new EventProxy();
 
-var $errTip = $('.tips'),
-    $errMsg = $errTip.find('.rectangle');
-
 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(ele) {
+    return ele.next('.tips').addClass('hide');
 }
 
 function disableSMSBtn() {
@@ -125,7 +121,7 @@ $phoneNumInput.on('blur', function() {
     var length = $phoneNumInput.val().length;
 
     if (length === 0) {
-        errTip($phone, '请输入手机号码');
+        errTip($phoneNumInput, '请输入手机号码');
         ep.emit('phoneNum', false);
         return;
     }
@@ -139,7 +135,7 @@ $phoneNumInput.on('blur', function() {
                 ep.emit('phoneNum', true);
                 return;
             } else {
-                errTip($phone, '手机号码不正确，请重新输入');
+                errTip($phoneNumInput, '手机号码不正确，请重新输入');
                 ep.emit('phoneNum', false);
                 return;
             }
@@ -150,6 +146,8 @@ $phoneNumInput.on('blur', function() {
         ep.emit('phoneNum', false);
         return;
     }
+}).on('focus', function() {
+    hideTip($phoneNumInput);
 });
 
 $imgCaptchaInput.on('blur', function() {
@@ -178,6 +176,8 @@ $imgCaptchaInput.on('blur', function() {
             refreshImgCaptcha();
         }
     });
+}).on('focus', function() {
+    hideTip($imgCaptchaInput);
 });
 
 $imgCaptchaCtrl.on('click', function() {
@@ -208,6 +208,8 @@ $smsCaptchaInput.on('blur', function() {
             errTip($smsCaptchaInput, '验证码不正确');
         }
     });
+}).on('focus', function() {
+    hideTip($smsCaptchaInput);
 });
 
 $smsCaptchaCtrl.on('click', function() {

@@ -10,6 +10,11 @@ $btn-width: 180px;
     .pwd-page,
     .relate-success-page {
         @mixin passport-page;
+
+        .img-captcha-wrapper,
+        .sms-captcha-wrapper {
+            width: $captcha;
+        }
     }
 
     .bind-confirm-page {