Question

当鼠标悬停在复选框的标签上时会显示工具提示，并在不悬停时隐藏。

HTML：

<div style="margin: 2em 0 0 2em">
  <label id="checkbox-label">
  <input type="checkbox">Checkbox</label>
</div>

JS：

$('#checkbox-label').tooltip({
  title: "This tooltip won't disappear when the checkbox is checked.",
  placement: "right"
})

问题是当用户选中或取消选中该复选框时，工具提示不会隐藏，直到用户点击屏幕上的其他位置。

选中/取消选中复选框时，如何使此工具提示消失？

这是一个重现问题的JS小提琴：http://jsfiddle.net/eLax5hdq/5/

Answer 1

我遇到了同样的问题，但想出了一个不同的解决方案：

$('#checkbox-label').on('show.bs.tooltip change', function (e) {
    $(this).blur();
});

Answer 2

使用$(this).tooltip("hide")而非$(this).tooltip("close")，.tooltip()剂量不支持值为"close"的参数。

Fiddle Example

正如Bootstrap documentation中所述，tooltip支持的方法有：.tooltip('hide')，.tooltip('show')，.tooltip('toggle')和.tooltip('destroy')。

Answer 3

仅供参考，但已经得到了解答。

为了将来参考，当tooptip即将显示时，bootstrap将触发show.bs.tooltip事件。这样你就可以有条不紊地检查一下。如果将事件传递给函数，则可以运行event.preventDefault（），如果条件失败并且您不希望显示工具提示。

http://jsfiddle.net/SeanWessell/eLax5hdq/9/

$('#checkbox-label').on('show.bs.tooltip change', function (e) {
    $this = $(this);
    if (e.type == 'show' && $this.find(":checkbox").is(":checked")) {
        e.preventDefault();
    } else if (e.type == 'change') {
        $this.find(":checkbox").is(":checked") ? $this.tooltip('hide') : $this.tooltip('show');
    }
});

Answer 4

用更简单的解决方案回答我自己的问题，但我会按原样留下接受的答案。

默认情况下，Bootstrap在悬停和焦点上显示工具提示。单击该复选框会使元素处于焦点，这就是为什么工具提示在没有一些额外代码的情况下不会隐藏的原因，如此问题的其他两个答案所示。

修复方法是通过将data-trigger="hover"添加到<label>元素来指定我只想悬停工具提示。

总之，改变一下：

<div>
  <label id="checkbox-label">
    <input type="checkbox">Checkbox
  </label>
</div>

要：

<div>
  <label id="checkbox-label" data-trigger="hover">
    <input type="checkbox">Checkbox
  </label>
</div>

标记/清除复选框时，引导程序复选框标签上的工具提示不会隐藏

4 个答案: