html - ブートストラップのポップオーバーがテーブルで機能しない

Question

私は自分のhtmlファイルに以下を含めました：

<h:outputStylesheet name="css/bootstrap.css" />
<h:outputScript name="js/jquery-2.0.2.min.js" />
<h:outputScript name="js/bootstrap-tooltip.js" />
<h:outputScript name="js/bootstrap-popover.js" />

ポップオーバーを作成するはずの部分:

<ui:repeat var="lowFareCalenderSearchItem" value="#{lowFareCalenderSearchItems}">
    <td>
        <a href="#" id="searchItem" class="btn" rel="popover">#searchResult.getTotal()}</a>
        <script>
        $("#searchItem").popover({
            title: "title",
        content: "content"
        });
        </script>                               
    </td>
</ui:repeat>

表示しようとしているポップオーバーは、ボタンにカーソルを合わせたりクリックしたりしても表示されません。

私は他の同様の質問を見てきましたが、そこで見つかったものは何もありませんでした。

なぜこれが起こっているのか誰にも分かりますか？