Bootstrap button

Question

I am having difficulty removing tooltip by jquery on a button. The operation of the button is as follows, if you have a form with required field blank, it makes the button stay disabled, I want the tooltip to appear if the button is disabled, otherwise the tooltip will disappear.

Below is the form code, including css and jq.

$(document).ready(function() {
  $('.input-group input[required], .input-group textarea[required], .input-group select[required]').on('keyup change', function() {
    var $form = $(this).closest('form'),
        $group = $(this).closest('.input-group'),
        $addon = $group.find('.input-group-addon'),
        $icon = $addon.find('span'),
        state = false;

    if (!$group.data('validate')) {
      state = $(this).val() ? true : false;
    }else if ($group.data('validate') == "email") {
      state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val())
    }else if($group.data('validate') == 'phone') {
      state = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test($(this).val())
    }else if ($group.data('validate') == "length") {
      state = $(this).val().length >= $group.data('length') ? true : false;
    }else if ($group.data('validate') == "number") {
      state = !isNaN(parseFloat($(this).val())) && isFinite($(this).val());
    }

    if (state) {
      $addon.removeClass('danger');
      $addon.addClass('success');
      $icon.attr('class', 'glyphicon glyphicon-ok');
    }else{
      $addon.removeClass('success');
      $addon.addClass('danger');
      $icon.attr('class', 'glyphicon glyphicon-remove');
    }

    if ($form.find('.input-group-addon.danger').length == 0) {
      $form.find('[type="submit"]').prop('disabled', false);
    }else{
      $form.find('[type="submit"]').prop('disabled', true);
    }
  });

  $('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change');


});

.input-group {
  padding: 5px;
}
.input-group-addon.success {
  color: rgb(92, 184, 92);
  background-color: #fff;
}
.input-group-addon.info {
  color: rgb(57, 179, 215);
  background-color: #fff;
}
.input-group-addon.danger {
  color: rgb(217, 83, 79);
  background-color: #fff;
}
.tooltip-wrapper {
  display: inline-block;
}

.tooltip-wrapper .btn[disabled] {
  pointer-events: none;
}

.tooltip-wrapper.disabled {
  cursor: not-allowed;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form id="form-contact">
  <h1>Contato</h1>
  <div class="input-group" data-validate="email">
    <input type="text" class="form-control" name="email" id="validate-email" placeholder="Email" required>
    <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
  </div>
  <div class="input-group">
    <input type="text" class="form-control" name="name" id="validate-text" placeholder="Nome" required>
    <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
  </div>
  <div class="input-group">
    <input type="text" class="form-control" name="phone-number" id="validate-optional" attrname="phone-mask" placeholder="(11) 1111-1111 (Opcional)">
    <span class="input-group-addon info"><span class="glyphicon glyphicon-asterisk"></span></span>
  </div>
  <div class="input-group">
    <select class="form-control" name="subject" id="validate-select" required>
      <option value="">Selecione o Assunto</option>
      <option value="Dúvidas">Dúvidas</option>
      <option value="Orçamentos">Orçamentos</option>
      <option value="Reclamações">Reclamações</option>
    </select>
    <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
  </div>
  <div class="input-group" data-validate="length" data-length="1">
    <textarea type="text" class="form-control" name="content" id="validate-length" placeholder="Conteúdo..." required></textarea>
    <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
  </div>
  <div class="input-group" data-validate="length" data-length="1">
    <div class="tooltip-wrapper disabled">
      <button type="submit" class="btn btn-primary">Enviar</button>
    </div>
  </div>
</form>

<script>
  $(function() {
  if($('.btn-primary').prop('disabled', true)) {
    $('.tooltip-wrapper').tooltip({
      placement: "right",
      title: "Preencha todos os campos corretamente."
    });
  } else {
    $('.tooltip-wrapper').tooltip('disable');
  }
});
</script>

Answer 1

You can instead of using a disable, use Windows in the same condition that disables and enables the button, and when it is to rehabilitate the button you rebuild the tooltip

$(document).ready(function() {
        $('.input-group input[required], .input-group textarea[required], .input-group select[required]').on('keyup change', function() {
            var $form = $(this).closest('form'),
                $group = $(this).closest('.input-group'),
                $addon = $group.find('.input-group-addon'),
                $icon = $addon.find('span'),
                state = false;

            if (!$group.data('validate')) {
                state = $(this).val() ? true : false;
            }else if ($group.data('validate') == "email") {
                state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val())
            }else if($group.data('validate') == 'phone') {
                state = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test($(this).val())
            }else if ($group.data('validate') == "length") {
                state = $(this).val().length >= $group.data('length') ? true : false;
            }else if ($group.data('validate') == "number") {
                state = !isNaN(parseFloat($(this).val())) && isFinite($(this).val());
            }

            if (state) {
                $addon.removeClass('danger');
                $addon.addClass('success');
                $icon.attr('class', 'glyphicon glyphicon-ok');
            }else{
                $addon.removeClass('success');
                $addon.addClass('danger');
                $icon.attr('class', 'glyphicon glyphicon-remove');
            }

            if ($form.find('.input-group-addon.danger').length == 0) {
                $form.find('[type="submit"]').prop('disabled', false);
                $('.tooltip-wrapper').tooltip('destroy');
            }else{
                $form.find('[type="submit"]').prop('disabled', true);
                $('.tooltip-wrapper').tooltip({
                    placement: "right",
                    title: "Preencha todos os campos corretamente."
                });
            }
        });

        $('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change');


    });