html - Bootstrap 弹出窗口在表格中不起作用

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

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

我通过在单元格内使用 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>