当用户单击它时，如何关闭Bootstrap Popovers（或一般的任何项目）？

Question

我在手动模式下使用Twitter的Bootstrap库中的弹出对象，我想知道当用户单击它时，我应该如何关闭工具提示。

这是我的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');
});

当用户单击弹出窗口本身以外的任何地方时，如何隐藏弹出窗口？我想到了在弹出窗口后面使用固定的透明div并设置了点击事件，但我不确定这是最好的方法。

Answer 1

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

Answer 2

我最终接线到文档单击事件，然后隐藏任何工具提示

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

如果您使用手动触发选项并将单击事件接线以显示工具提示，则需要调用e.stoppropagation（）以防止显示工具提示时的文档点击事件触发。

Answer 3

触发您在身体内的任何地方触发的通用点击事件侦听器呢？查看这篇文章，看起来与您要实现的目标相似。

https://stackoverflow.com/a/2125122/1013422

您将使用它来关闭实际的弹出案

$('#stats-bar').popover('hide')

我只会在运行弹出事件时定义该功能，然后在关闭弹出窗口后将其删除，这样您就不会不断收听点击事件。