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

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

Answer 3

通用点击事件监听器如何触发您在正文中点击的位置？看看这篇文章，它看起来与你想要实现的类似。

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

您可以使用它来关闭实际的弹出窗口

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

我只会在弹出事件运行时定义该函数，然后在关闭弹出窗口后将其删除，这样您就不会经常监听点击事件。

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

3 个答案: