这将显示一个工具提示时,悬停在一个复选框的标签和隐藏时,没有悬停。
超文本:
<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/
5条答案
按热度按时间qco9c6ql1#
我刚刚遇到了同样的问题,但想出了不同的解决方案:
lx0bsm1f2#
仅供参考,虽然这已经回答。
为了便于将来参考,当工具提示即将显示时, Bootstrap 会触发show.bs.tooltip事件。这样,您可以有条件地检查某些内容。如果您将事件传递给函数,则可以在条件失败且您不希望显示工具提示时运行event.preventDefault()。
http://jsfiddle.net/SeanWessell/eLax5hdq/9/
brvekthn3#
使用
$(this).tooltip("hide")
而不是$(this).tooltip("close")
,因为.tooltip()
不支持值为"close"
的参数。Fiddle Example
如Bootstrap文档中所述,
tooltip
支持的方法包括:.tooltip('hide')
、.tooltip('show')
、.tooltip('toggle')
和.tooltip('destroy')
。wfauudbj4#
用一个更简单的解决方案来回答我自己的问题,但我将保留公认的答案。
Bootstrap默认显示悬停和焦点时的工具提示,点击复选框会使元素处于焦点状态,这就是为什么工具提示不会隐藏,除非有额外的代码,如这个问题的另外两个答案所示。
修复的方法是通过将
data-trigger="hover"
添加到<label>
元素来指定我只希望悬停时显示工具提示。总而言之,请更改以下内容:
收件人:
qmb5sa225#
触发器的默认值是“悬停焦点”,因此工具提示在单击按钮后保持可见,直到单击另一个按钮,因为该按钮处于焦点状态。
$('[数据切换=“工具提示”]').工具提示({触发器:'悬停' })