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>

当我将鼠标悬停在或单击按钮时，我试图显示的弹出窗口不会出现。

我看过其他类似的问题，但我发现那里没有任何东西对我有用。

有谁知道为什么会发生这种情况？

Answer 1

事实证明，弹出框不能只放入表格单元格中。

我通过在单元格内使用 div 和 span 来解决它：

<td>
    <div>
        <span id="searchItem" rel="popover">
            Click to pop
        </span>

        <script>
            $(document).ready(function() {
                $("#searchItem").popover({
                    html: true,
                    animation: false,
                    content: "TO BE ANNOUNCED",
                    placement: "bottom"
                });
            });
        </script>
    </div>
</td>