Question

我使用Bootstrap（使用jQuery）来显示一个弹出窗口。我的标记是：

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

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

为什么？

我缺少什么设置/功能？

感谢您提出的任何想法/帮助。 Lori＆lt; *＆gt;

Answer 1

首先，您引用onclickShowTooltip()，但您的函数名为onclickShowToolTip。此外，选项＆＃34; tigger＆＃34;应该是trigger。正如我所看到的那样，仅弹出一次弹出窗口的原因是函数中的最后一次手动激活popover("show")。

我不确定你为什么要这样做。弹出窗口的优点在于，您可以通过HTML属性或popover({})初始化来自动完成整个过程。您可以完全跳过onclickShowToolTip和onclick事件，只需

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

演示 - ＆gt;的 http://jsfiddle.net/hdt0hy21/

Bootstrap - 弹出窗口不会在第二次单击时激活

1 个答案: