我希望工具提示显示在td元素的顶部,但它似乎总是显示在底部。在创建的这个小提琴中,您可以看到,当它位于td元素内部时,工具提示将显示在该元素的底部;但是,当我将相同的按钮标签放入div时,工具提示将显示在按钮的顶部。有人可以指出我做错了什么吗?
<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'})
});