Why is the content not showing in a popover with dataTables?

Question

I am using dataTables for showing same data and I have a remarks column which I want to show in the table the first 30 characters but when I hover over the remark, then the whole remark must be visible in the popover.

This is the HTML:

<table id="aangeboden-ritten" class="table table-striped" style="width:100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Remarks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a data-toggle="popover" title="Remarks" data-content="Long remarks, here must come the full text" data-trigger="hover">Short remarks ...</a></td>
    </tr>
  </tbody>
</table>

And this is the Javascript:

$(document).ready(function() {
  $('#aangeboden-ritten').DataTable({
    fnDrawCallback : function() {
      $('[data-toggle="popover"]').popover(); 
    }
  });
});

A working Fiddle is here

Any idea why I see only the title (Remarks) when I hover the remark but I don't see the long content?

Kind regards,

Arie

Answer 1

Your code isn't working as you have not included the relevant libraries in the page. You need to reference jQuery, Bootstrap and Datatables.

Also note that your question is tagged with 'Bootstrap 5', yet the pattern you're following to invoke the Bootstrap popup and provide it with data imply you're using Bootstrap 4.

$(document).ready(function() {
  $('#aangeboden-ritten').DataTable({
    fnDrawCallback: function() {
      $('[data-toggle="popover"]').popover();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" />

<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" />

<table id="aangeboden-ritten" class="table table-striped" style="width:100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Remarks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a data-toggle="popover" title="Remarks" data-content="Long remarks, her must come the full text" data-trigger="hover">Short remarks ...</a></td>
    </tr>
  </tbody>
</table>