TD中的Bootstrap 4工具提示不会显示在顶部

如何解决TD中的Bootstrap 4工具提示不会显示在顶部

我希望工具提示显示在td元素的顶部，但它似乎总是显示在底部。在创建的这个小提琴中，您可以看到，当它位于td元素内部时，工具提示将显示在该元素的底部；但是，当我将相同的按钮标签放入div时，工具提示将显示在按钮的顶部。有人可以指出我做错了什么吗？

jsfiddle bootstrap4 tooltip

<div class="container">
  <div class="row">
    <div class="col">
      <table class="table">
        <tr>
          <td>
            <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">53
            </button>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
        Tooltip on top
      </button>
      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
        Tooltip on right
      </button>
      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
        Tooltip on bottom
      </button>
      <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
        Tooltip on left
      </button>
    </div>
  </div>
</div>

$(document).ready(function () {
  $('[data-toggle="tooltip"]').tooltip({container:'body'})
});