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

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

CodePudding user response：

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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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"  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>