为什么内容没有显示在带有数据表的弹出窗口中？

Question

我正在使用数据表来显示相同的数据，我有一个备注栏，我想在 table 前 30 个字符中显示，但是当我将鼠标悬停在备注上时，整个备注必须可见在弹出窗口中。

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

这是 Javascript:

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

工作 Fiddle 是 here

知道为什么当我悬停评论时只看到标题（备注）但看不到长内容吗？

亲切的问候，

阿里

Answer 1

您的代码无法正常工作，因为您没有在页面中包含相关的库。您需要参考 jQuery、Bootstrap 和数据表。

另请注意，您的问题带有 'Bootstrap 5' 标记，但您调用 Bootstrap 弹出窗口并向其提供数据所遵循的模式暗示您正在使用 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>

为什么内容没有显示在带有数据表的弹出窗口中？

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

jquery

datatables

bootstrap-5

popover