Popover not working in dynamic table when click on click here option

user_16413533 0
Viewed 165

I am giving popover option on my dynamic table, but the popover not working properly. when I click on 'click here' option on table header then popover comes, but it showing very small in size. I tried to set the width, height but it's not working. In the popover, one input field must be required.

<table id="parent_table">
    <thead id="parent-header" >
    </thead>
    <tbody id="parent-table">
    </tbody>
</table>

var $parent_table = $('#parent_table');
var $parent_tableThead = $parent_table.find('#parent-header');
var $parent_tableTbody = $parent_table.find('#parent-table');

for (var i = 0; i < 4; i++) {
  $parent_tableThead.append('<th> column' + i + ' <span name="popover"> click here</span></th>');

}
var rowHtml;
for (var x = 0; x < 20; x++) {
  rowHtml = '<tr>';
  for (let z = 0; z < 4; z++) {
    if (z == 0) {
      rowHtml += '<td> A ' + x + '</td>';
    }
    else if (z == 1) {
      rowHtml += '<td> B' + x + '</td>';
    }
    else {
      rowHtml += '<td> ' + x + '</td>';
    }
  }
  rowHtml += '</tr>';
  $parent_tableTbody.append(rowHtml);
}

$(document).on('click', 'span[name="popover"]', function () {
  var content = " <div class='content'><div class='form-group'><input type='text' class='form-control' value='enter number'>" +
    "</div></div>" +
    "<div>Pin out</div>" +
    "<div id='hide'>Hide</div>" +
    "<div id='unhide'>UnHide</div>" +
    "<div>Search</div>"

  $(this).popover({
    html: true,
    content: content,
    placement: 'bottom',
    template: '<div class="popover" role="tooltip" style="width:230px;">' +
      '<div class="arrow"></div>' +
      '<h3 class="popover-title"></h3>' +
      '<div class="popover-content"></div>' +
      '</div>'
  }).popover('show');
});
html-table popup jquery javascript
1 Answers

You can just declare a new CSS class .wide-popover {width: 250px;} and use it in the template <div class="popover wide-popover">.

const $parent_table = $('#parent_table');
const $parent_tableThead = $parent_table.find('#parent-header');
const $parent_tableTbody = $parent_table.find('#parent-table');

for (let i = 0; i < 4; i++) {
  $parent_tableThead.append('<th> column' + i + '<span name="popover"><button>click here</button></span> </th>');
}
let rowHtml;
for (let x = 0; x < 20; x++) {
  rowHtml = '<tr>';
  for (let z = 0; z < 4; z++) {
    if (z == 0) {
      rowHtml += '<td> A ' + x + '</td>';
    }
    else if (z == 1) {
      rowHtml += '<td> B' + x + '</td>';
    }
    else {
      rowHtml += '<td> ' + x + '</td>';
    }
  }
  rowHtml += '</tr>';
  $parent_tableTbody.append(rowHtml);
}

$(document).on('click', 'span[name="popover"]', function () {
  $(this).popover({
    html: true,
    title: 'Popover title',
    content: 'Popover content',
    placement: 'bottom',
    template: '<div class="popover wide-popover"><div class="arrow"></div>'+
              '<h3 class="popover-title"></h3><div class="popover-content">'+
              '</div></div>'
  }).popover('show')
});
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.wide-popover {width: 250px;}
</style>
<table id="parent_table">
  <thead id="parent-header" >
  </thead>
  <tbody id="parent-table">
  </tbody>
</table>

Alternatively, you could use jQuery to update the CSS of the Popover after inserting it to the DOM as done below. However, do note that manipulating your styles with JavaScript is generally not recommended.

$(this).popover({
    html: true,
    title: 'Popover title',
    content: 'Popover content',
    placement: 'bottom',
    template: '<div class="popover"><div class="arrow"></div>'+
              '<h3 class="popover-title"></h3><div class="popover-content">'+
              '</div></div>'
  }).popover('show')
$('.popover').css('width','250px');
user_7035830
Related