未单击按钮时显示工具提示

Question

I want to show a tooltip when the user didn't click the specific button while submitting a form. I prevent the form from submitting and I want to show just the tooltip to say "you should click first the button". Thank's in advance.

<form id="signUpForm">
    <button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7">I Agree</button>
    <input type="hidden" id="hidden" value="0">
    <input type="submit" id="btn-submit" value="submit">
</form>

<script>
    $('#signUpForm').submit(function(e) {
        if ($('#hidden').val() == '0') {
            e.preventDefault();
            //show the tooltip that "you first click the agree button" and fadeOut(1000)
        }
    });
</script>

Answer 1

try this, make button type as button instead of submit:

<form id="signUpForm" >
 <button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7" >I Agree</button>
 <input type="hidden" id="hidden" value="0">
 <input type="button" id="btn-submit" value="submit">
</form>

 <script>
 $('#btn-submit').click(function(e){
   if($('#hidden').val()=='0'){

   }
   else {
      $('#signUpForm').submit();
   }
 });
 </script>

Answer 2

Check below script it will helpful to you for display the tooltip.

<script>
    $(".tooltip").hide();
    $('#signUpForm').submit(function (e) {
        if ($('#hidden').val() == '0') {
            e.preventDefault();
            //show the tooltip that "you first click the agree button" and    fadeOut(1000)
            $("#signUpForm").find(".tooltip").stop().fadeIn();
            setTimeout(function () {
                $("#signUpForm").find(".tooltip").stop().fadeOut();
            }, 1000);
        }
    });
</script>

HTML Part

<form id="signUpForm">
    <button type="button" id="agree" class="btn btn-default" data-color="info" tabindex="7">I Agree</button>
    <input type="hidden" id="hidden" value="0">
    <input type="submit" id="btn-submit" value="submit">
    <div class="tooltip">
        you first click the agree button
    </div>
</form>