Bootstrap popovers not working in table

Question

I've included the following in my html file:

<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" />

The part that is supposed to make the popover:

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

The popovers I'm trying to get to display don't turn up when I hover over or click the button.

I have looked at other similar questions, and nothing I've found there has worked for me.

Does anyone know why this could be happening?

Answer 1

It turns out that the popover can't just be put into the table cell.

I solved it by using a div and span inside the cell:

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