What is wrong with my bootstrap popover in Meteor?

Question

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?

```return $('[data-toggle="popover"]').popover()``` Why the ```return```? Can you just try the same without the ```return``` keyword? — blueren, Oct 30 '16 at 05:41
I already tried it without the return. Sorry I didn't mention that. — webmagnets, Oct 30 '16 at 10:00

score 0 · Accepted Answer · answered Oct 31 '16 at 23:41

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>

What is wrong with my bootstrap popover in Meteor?

1 Answers1