Bootstrap popovers无法在表中工作

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>