Bootstrap - 弹出框不会在第二次点击时激活

Question

我正在使用 Bootstrap（带有 jQ​​uery）来显示一个弹出框。我的标记是：

<div class="tooltip-div" id="TooltipDiv"
     onclick="onclickShowTooltip();"
     rel="tooltip" data-toggle="tooltip" data-placement="bottom"
     data-html="true"
     data-title="This is the tool tip.">

  <span class="ImageSpan">
    <img class="tooltipIcon" src="svg/Icons-28.svg"
               alt="tool tip icon" />
  </span>
</div>

在我的 JavaScript 中，我有：

function onclickShowToolTip() {
  $('[data-toggle=popover]').on('shown.bs.popover', function () {
    $('.popover').css('bottom','100%')
  });
  $("#TooltipDiv").popover(
    {html: true,
     title: '',
     tigger: 'click',
     content: 'The meeting is secure.'});
  $("#TooltipDiv").popover('show');
}

工具提示在我第一次单击时显示。然后我在该区域外单击，工具提示消失（如预期的那样）。但是我再次点击图标，工具提示没有显示。

为什么？

我缺少什么设置/功能？

感谢您提供的任何想法/帮助。 萝莉

Answer 1

首先，你引用了onclickShowTooltip()，但是你的函数被命名为onclickShowToolTip。此外，选项“tigger”应该是trigger。弹出框只显示一次的原因是，在我看来，手动激活 popover("show") 最后在函数中。

我不确定你为什么要这样做。弹出框的好处是您可以通过 HTML 属性或 popover({}) 初始化来自动化整个过程。您可以完全跳过onclickShowToolTip 和onclick 事件，只需拥有

$("#TooltipDiv").popover({
    html: true,
    title: '',
    trigger: 'click',
    content: 'The meeting is secure.'
});

演示 -> http://jsfiddle.net/hdt0hy21/