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

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

53
顶部的工具提示
右边的工具提示
底部的工具提示
左侧的工具提示
$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。工具提示（{container:'body'}）
});

<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'})
});