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

【问题标题】：Tooltip on bootstrap checkbox label doesn't hide when marking / clearing the checkbox标记/清除复选框时，引导复选框标签上的工具提示不会隐藏
【发布时间】：2016-09-20 19:10:38
【问题描述】：

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

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 Fiddle：http://jsfiddle.net/eLax5hdq/5/

【问题讨论】：

标签： javascript jquery html twitter-bootstrap checkbox

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

仅供参考，尽管这已得到解答。

当 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');
    }
});

【讨论】：

【解决方案3】：

使用$(this).tooltip("hide") 而不是$(this).tooltip("close") 作为.tooltip() 不支持值为"close" 的参数。

Fiddle Example

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

【讨论】：

非常感谢。我曾尝试“破坏”，但这在整个网站上不起作用。 “隐藏”效果很好。
无法正常工作...在您多次移入和移出鼠标后，工具提示仍然显示。
@Alvaro 此答案不打算删除该部分，如果您希望工具提示完全消失，请将其更改为 $(this).tooltip("destroy");。用户不想在悬停时删除工具提示，只希望在悬停期间单击要隐藏的项目。另一个答案具有很好的功能，是您期望的样子，但这不是 OP 所要求的。
好的，我明白了。如果您更新答案，我将能够删除我的反对票。现在不能。

【解决方案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>

【讨论】：