Search code examples
javascriptbootstrap-4popover

issues with popover on dynamically created table

I need to populate a table dynamically (size and content might vary) and am having a hard time showing a popover on td elements. I even tried attaching the popover on aTag elements before adding them to tds no help. this is essentially the skeleton: script tags(jquery,bootstrap,popper CDNs) +html table + function to generate table elements with popovers any help would be appreciated

<script>
function drawTable() {
  var tbody = document.getElementById("plTable");
  for (var r = 0; r < totalRows; r++) {
    var row = document.createElement("tr");
    for (var c = 0; c < cellsInRow; c++) {
      var cell = document.createElement("td");

      var val = Math.floor(Math.random() * 10 - 6);
      if (r > 0 && c > 0 && val < 0) {
        cell.bgColor = "#e01515";
      } else if (r > 0 && c > 0 && val > 0) {
        cell.bgColor = "#1ff48d";
      }
      var cellText = document.createTextNode(val);
      cell.appendChild(cellText);
      cell.setAttribute("data-toggle", "popover");
      cell.setAttribute("data-content", "qty: 100 entry cost:$13");
      row.appendChild(cell);
    }
    tbody.appendChild(row);
  }
}
window.onload = drawTable;
</script>

<script>
$(document).ready(function () {
  $('[data-toggle="popover"]').popover({
    placement: "top",
    trigger: "hover",
  });
});
</script>
Solution

  • I think there is some problem with with your bootstrap imports. For me popover works fine when I run this code with bootstrap, imported in a html page. However there is some CSS glitches, but that can be taken care once popover works for you.

    enter image description here

    Code:

    <!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
      <script>
     function drawTable() {
     var totalRows = 4;
     var cellsInRow =4;
       var tbody = document.getElementById("plTable");
       
       for (var r = 0; r < totalRows; r++) {
         var row = document.createElement("tr");
         for (var c = 0; c < cellsInRow; c++) {
           var cell = document.createElement("td");
     
           var val = Math.floor(Math.random() * 10 - 6);
           if (r > 0 && c > 0 && val < 0) {
             cell.bgColor = "#e01515";
           } else if (r > 0 && c > 0 && val > 0) {
             cell.bgColor = "#1ff48d";
           }
           var cellText = document.createTextNode(val);
           cell.appendChild(cellText);
           cell.setAttribute("data-toggle", "popover");
           cell.setAttribute("data-content", "qty: 100 entry cost:$13");
           row.appendChild(cell);
         }
         tbody.appendChild(row);
       }
     }
     window.onload = drawTable;
  </script>
  <script>
     $(document).ready(function () {
       $('[data-toggle="popover"]').popover({
         placement: "top",
         trigger: "hover",
       });
     });
      </script>
   </head>
   <body>
      <table id="plTable"></table>
   </body>
</html>