我使用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;
答案 0 :(得分:0)
首先,您引用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/ 强>