Bootstrap 4 工具提示始终位于底部，在表格单元格中具有不同的位置答案

【问题标题】：Bootstrap 4 tooltip always positions at the bottom with different placements in table cellBootstrap 4 工具提示始终位于底部，在表格单元格中具有不同的位置
【发布时间】：2020-08-02 12:50:44
【问题描述】：

我在表格单元格中遇到此问题，该单元格的位置始终位于单元格底部。我希望它在悬停时显示在顶部，但它不会这样做。我相信它的第一个表响应类。

var handler = function (e) {

 $(this).addClass('tooltip-init').tooltip({
                            html: true,
                            placement: "top",
                            delay: { "show": 100, "hide": 0 },
                            trigger: 'hover'
                        }).tooltip('show');
                        
                         };
                        
                       $('.tooltip1').on('mouseenter', handler);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th  class="tooltip1" title="test" style="border: solid 1px #FF0000;">ToolTip Enabled
  </th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  </tr>
  </thead>
  <tbody>
  <tr>
<th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  </tr>
  <tr>
<th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  </tr>
  <tr>
<th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  </tr><tr>
<th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  </tr>
  <tr>
<th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  <th>test</th>
  </tr>
  <tbody>
  </table>
  </div>

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 tooltip twitter-bootstrap-tooltip

【解决方案1】：

嗯，即时解决这个问题有点复杂。但是引导工具提示将始终在父容器框中寻找可用空间，如果在所需位置没有可用空间，它将自动将其放置在另一侧。因此，解决此问题的一种可能的解决方法是将padding 添加到所需的一侧（在您的情况下是表格的顶部），并在表格框中为工具提示创建一个空间.

所以它会是这样的：

var handler = function(e) {
  $(this).addClass('tooltip-init').tooltip({
    html: true,
    placement: "top",
    delay: {
      "show": 100,
      "hide": 0
    },
    trigger: 'hover'
  }).tooltip('show');
};

$('.tooltip1').on('mouseenter', handler);

.table-responsive {
  padding-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th class="tooltip1" title="test" style="border: solid 1px #FF0000;">ToolTip Enabled
        </th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
      </tr>
      <tr>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
      </tr>
      <tr>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
      </tr>
      <tr>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
      </tr>
      <tr>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
      </tr>
      <tbody>
  </table>
</div>

更新

正如您提到的最初建议的解决方法并不理想，我想出了另一个更方便合理的解决方案。正如我之前提到的，问题出在父包装盒行为之下，在您的特定情况下，您使用table-responsive 类作为整个表的包装器，引导程序将手动将其overflow 设置为auto，因此无论元素溢出包装盒将被忽略，在这种情况下，它将显示在对面，因此要解决此问题，您应该只覆盖该元素的 overflow。

所以它会是这样的：

var handler = function(e) {
  $(this).addClass('tooltip-init').tooltip({
    html: true,
    placement: "top",
    delay: {
      "show": 100,
      "hide": 0
    },
    trigger: 'hover'
  }).tooltip('show');
};

$('.tooltip1').on('mouseenter', handler);

div.table-responsive {
  overflow: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<br>
<br>
<br>
<br>

<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th class="tooltip1" title="test" style="border: solid 1px #FF0000;">ToolTip Enabled
        </th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
      </tr>
      <tr>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
      </tr>
      <tr>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
      </tr>
      <tr>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
      </tr>
      <tr>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
        <th>test</th>
      </tr>
      <tbody>
  </table>
</div>

【讨论】：

我想这是一个选择，但并不理想。为什么它会将响应式类视为容器？
@MikeFlynn 是的，这只是一种可能的解决方法，但看起来不太好?。我不确定你所说的responsive class 是什么意思，但正如我之前所说，这完全是关于主包装盒的行为。所以我只是更新答案以获取更多信息。
什么使包装器成为主要的以及需要应用什么 css。我在其他项目上有很多包装，并且工具提示工作正常。如果我删除表响应类，它也可以正常工作。
@MikeFlynn 最外层的父级将是主要的，因此在这种特殊情况下，table-responsive 将是表的主要（主框），并且正如您所说，它不会在任何地方发生，只要主父级的溢出是auto 或hidden，就会发生，因此要覆盖它，您需要分配一个id （或具有高特异性优先级的任何东西) 到该包装器，然后使用overflow: visible; 使其溢出可见。
@MikeFlynn 你得出结论了吗？

【解决方案2】：

将 css 样式 padding-top: 50px; 添加到 .table-responsive。

测试：https://jsfiddle.net/a0jht7v2/

【讨论】：