Question

我在Bootstrap工具提示方面遇到了一些问题。

我有一个按钮，默认为disabled。

如果我在输入中输入了一些文本，并且输入的值不为空，那么我启用该按钮。

当我按下按钮时，我通过ajax保存数据，清空输入值并再次禁用按钮。所有这些都是完美的。

唯一的问题是工具提示由于某种原因而卡住了，我不知道为什么。

我尝试通过jQuery启用/禁用工具提示，但它没有帮助。我在keyup / click上添加了这个，但是没有用。

$('data-toggle="tooltip"]').tooltip('disable') // Disable tooltips
$('data-toggle="tooltip"]').tooltip('enable')  // Re enable

这是 jsFiddle

HTML

<form class="form-horizontal">
  <div class="form-group">
    <label for="in" class="col-sm-3">The label</label>
    <div class="col-sm-9">
      <input class="form-control" type="text" id="in">
    </div>
    <input id="myBtn" class="btn btn-default" type="button" value="This is a button" disabled="disabled" data-toggle="tooltip" data-placement="right" title="This is a tooltip">
  </div>
</form>

的jQuery

$('[data-toggle="tooltip"]').tooltip();

$('#in').keyup(function() {
    if ($(this).val() !== '') {
      $('#myBtn').prop('disabled', false);
    } else {
      $('#myBtn').prop('disabled', true);
    }
});

$('#myBtn').click(function() {
    $('#in').val('');
    $(this).prop('disabled', true);
});

Answer 1

将此行添加到按钮点击事件 - $(this).tooltip('hide');

      $('#myBtn').click(function () {
            $('#in').val('');
            $(this).prop('disabled', true);

            $(this).tooltip('hide');

        });

Answer 2

此处已更新fiddle

$('[data-toggle="tooltip"]').tooltip('hide');

按钮点击事件

后，您必须隐藏工具提示

Answer 3

试试这个，

JS Fiddle

$('#myBtn').click(function() {
     $('#in').val('');
     $(this).tooltip('hide');           
     $(this).prop('disabled', true);
  });

Bootstrap工具提示卡在禁用状态

3 个答案: