Bootstrap popovers无法在表中工作

时间:2013-07-25 12:21:05

标签: html jsf twitter-bootstrap popover

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

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

我已经看过其他类似的问题了,我发现那些对我没有任何帮助。

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

1 个答案:

答案 0 :(得分:13)

事实证明,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>