标记/清除复选框时, Bootstrap 复选框标签上的工具提示未隐藏

mwkjh3gx  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(5)|浏览(163)

这将显示一个工具提示时,悬停在一个复选框的标签和隐藏时,没有悬停。
超文本:

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

联森:

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

问题是,当用户选中或取消选中复选框时,工具提示不会隐藏,直到用户单击屏幕上的其他地方。
如何在选中/取消选中复选框时使此工具提示消失?
下面是一个JS Fiddle重现的问题:http://jsfiddle.net/eLax5hdq/5/

qco9c6ql

qco9c6ql1#

我刚刚遇到了同样的问题,但想出了不同的解决方案:

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

lx0bsm1f2#

仅供参考,虽然这已经回答。
为了便于将来参考,当工具提示即将显示时, 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');
    }
});
brvekthn

brvekthn3#

使用$(this).tooltip("hide")而不是$(this).tooltip("close"),因为.tooltip()不支持值为"close"的参数。
Fiddle Example
Bootstrap文档中所述,tooltip支持的方法包括:.tooltip('hide').tooltip('show').tooltip('toggle').tooltip('destroy')

wfauudbj

wfauudbj4#

用一个更简单的解决方案来回答我自己的问题,但我将保留公认的答案。
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>
qmb5sa22

qmb5sa225#

触发器的默认值是“悬停焦点”,因此工具提示在单击按钮后保持可见,直到单击另一个按钮,因为该按钮处于焦点状态。
$('[数据切换=“工具提示”]').工具提示({触发器:'悬停' })

相关问题