如何在用户点击它时关闭Bootstrap popovers(或一般的任何项目)？

Question

我正在手动模式下使用Twitter的Bootstrap库中的popover对象,我想知道当用户点击它时我应该如何关闭工具提示.

这是我的HTML:

<a id="stats-bar" rel="popover" data-placement="top" data-trigger="manual" data-title="Title here" data-content="Hello everyone.">Test</a>

和我的JavaScript:

$('#stats-bar').click(function(e) {
        $(this).popover('show');
});

当用户点击除弹出窗口本身以外的任何地方时,如何隐藏弹出窗口？我想在popover后面使用一个固定的透明div并设置它的click事件,但我不确定这是最好的方法.

Answer 1

我最终连接到文档点击事件并隐藏了该点的任何工具提示

      $(document).click(function (e)
      {
          // check the parents to see if we are inside of a tool tip.  If the click came
          // from outside the tooltip, then hide our tooltip
          if ($(e.target).parents('.tooltip').length == 0) $('[data-original-title]').tooltip('hide');
      });

如果您使用手动触发选项并连接到click事件以显示工具提示,则需要调用e.stopPropagation()以防止在显示工具提示时触发文档单击事件.

Answer 2

我选择在弹出窗口后面使用固定的透明 div 并设置其单击事件，因为这似乎是最强大和最简单的解决方案。