我在 Meteor 中的 bootstrap 弹出窗口有什么问题?

What is wrong with my bootstrap popover in Meteor?

我安装了 bootstrap.js,但我无法在点击时显示弹出窗口。

这是我的 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>

这是我的模板:

<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>

这是 onRender:

Template.word.onRendered(function() {
    return $('[data-toggle="popover"]').popover()
})

我错过了什么?

答案是我需要将 tabindex="0" 添加到 div。

像这样:

<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>