Bootstrap popovers nie pracuje w tabeli

Question

podaję następujące w moim pliku 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" /> 

Część, która ma dokonać 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> 

W Popovers Próbuję aby wyświetlić, nie pojawiaj się po najechaniu kursorem myszy lub kliknięciu przycisku.

Przyjrzałem się innym podobnym pytaniom i nic, co tam znalazłem, nie zadziałało.

Czy ktoś wie, dlaczego tak się mogło dziać?

Answer 1

Okazuje się, że popover nie można po prostu umieścić w komórce tabeli.

I rozwiązać go za pomocą div i rozpiętość wewnątrz komórki:

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