Bootstrap popovers non funziona nella tabella

Question

ho incluso il seguente nel mio file 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" /> 

La parte che dovrebbe rendere la 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> 

Le popovers che sto cercando per arrivare alla visualizzazione non si alza quando passo il mouse sopra o fai clic sul pulsante.

Ho esaminato altre domande simili e nulla di ciò che ho trovato ha funzionato per me.

Qualcuno sa perché questo potrebbe accadere?

Answer 1

Si scopre che il popover non può essere semplicemente inserito nella cella della tabella.

ho risolto utilizzando un div e span all'interno della cellula:

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