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

Show tooltip when the button isn't clicked

本文关键字：显示 工具提示 按钮 单击      更新时间：2023-09-26

我想在用户提交表单时未单击特定按钮时显示工具提示。我阻止表单提交，我只想显示工具提示，说"您应该先单击按钮"。提前谢谢。

<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>

试试这个，将按钮类型设置为按钮而不是提交：

<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>

检查下面的脚本，它将帮助您显示工具提示。

<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>

网页部件

<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>
相关文章：