jQuery

<script type="text/javascript">
          $("#username").click(function(event){
              $("#tip-username").show();
              event.stopPropagation();//阻止冒泡
          });
          $("#username").blur(function(){
            $("#tip-username").hide();
          });
          $("body").click(function(){
              $("#tip-username").hide();
          });
          $('#tip-username').click(function(){
              return false;
          });
</script>

html

<label>设 置 密 码</label>
          <input type="password" id="password" name="password" class="txtinput"  placeholder="请设置您的密码"/>
          <div id="tip-pwd">
              <div class="tip-bd">
                  <div class="pw-rule">
                      <div class="pw-rule-item pw-rule-length">
                          <li class="iconfont"></li>
                          <span>6~20字符</span>
                      </div>
                      <div class="pw-rule-item pw-rule-legal">
                          <li class="iconfont"></li>
                          <span>只能包含字母、数字以及标点符号（除空格）</span>
                      </div>
                      <div class="pw-rule-item pw-rule-multi">
                          <li class="iconfont"></li>
                          <span>字母、数字和标点符号至少包含2种</span>
                      </div>
                  </div>
              </div>
          </div>