I have bootstrap.js installed and I'm having trouble getting a popover to show up on click.
Here is my html:
<span data-sentenceindex="1">
<div class="word" data-wordid="EA9jNKEAiHmZDwFp7" data-toggle="popover" data-placement="auto top" data-trigger="focus" title="" data-content="Some content inside the popover" style="text-align: center; display: inline-block" data-original-title="Popover Header">
<p class="thinnerBottom">Shang4di4</p>
<h3 class="thinnerTop">你好</h3>
</div>
<div class="word" data-wordid="6gNwivPpCpyfstTjC" data-toggle="popover" data-placement="auto top" data-trigger="focus" title="" data-content="Some content inside the popover" style="text-align: center; display: inline-block" data-original-title="Popover Header">
<p class="thinnerBottom">fa1chu1</p>
<h3 class="thinnerTop">发出</h3>
</div>
</span>
Here is my template:
<template name="word">
{{#with theWord}}
<div class="word" data-wordID="{{_id}}" data-toggle="popover" data-placement="auto top" data-trigger="focus"
title="Popover Header"
data-content="Some content inside the popover" style="text-align: center; display: inline-block">
<p class="thinnerBottom">{{pinyin}}</p>
<h3 class="thinnerTop">{{simp}}</h3>
</div>
{{/with}}
</template>
Here is the onRender:
Template.word.onRendered(function() {
return $('[data-toggle="popover"]').popover()
})
What am I missing?
The answer is that I need to add tabindex="0" to the div.
Like this:
<template name="word">
{{#with theWord}}
<div class="word" data-wordID="{{_id}}" data-toggle="popover" data-placement="auto top" data-trigger="focus"
tabindex="0"
title="Popover Header"
data-content="Some content inside the popover" style="text-align: center; display: inline-block">
<p class="thinnerBottom text-muted">{{pinyin}}</p>
<h3 class="thinnerTop">{{simp}}</h3>
</div>
{{/with}}
</template>