Can't get bootstrap popover to work

help
1

I have matb33:bootstrap-popovers 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>

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?

2

I don’t know if this is your problem but if your DOM changes (eg elements removed then added) the event handlers get disconnected or existing interactive elements lose their attachment to their controllers

Use the console to put a breakpoint in your event handler and see what happens

3

I don’t have an event handler. Should I?

4

Can you try this:

Template.word.onRendered(function() {
       setTimeout(function() {
           $('[data-toggle="popover"]').popover()
       },1000);
})

If it works, then reduce timeout to 200ms or so. My guess is that the DOM is not ready yet in your browser.

5

In your console, once page rendered, also make sure $('[data-toggle="popover"]').popover() this actually works

6

When I tried this I got:

jQuery.fn.init[876]
[0 … 99]
[100 … 199]
[200 … 299]
[300 … 399]
[400 … 499]
[500 … 599]
[600 … 699]
[700 … 799]
[800 … 875]
context
:
document
length
:
876
prevObject
:
jQuery.fn.init[1]
selector
:
"[data-toggle="popover"]"
__proto__
:
Object[0]
7

Now you are going into the specifics of bootstrap which I have not used in a while.
Here are suggested debugging steps (make sure the page is fully loaded so no DOM elements move around)

  1. Check that the selector works: $('[data-toggle="popover"]')
  2. Check that popover is included and works (call $.fn.popover and see if it returns function)
  3. Call popover with another selector (making sure that selector works)
8

The answer was that I needed to add tabindex=“0”, 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>