Bootstrap 4工具提示始终位于表格单元格底部的不同位置

2024-05-20 • 问答

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

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>

嗯，即时修复此问题有点复杂。但是引导工具提示将始终在父容器框中寻找可用空间，如果在所需位置没有可用空间，它将自动将其放置在相反的一侧。因此，解决此问题的一种可能的解决方法是将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,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>

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

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

Bootstrap 4工具提示始终位于表格单元格底部的不同位置

iCMS 回答：Bootstrap 4工具提示始终位于表格单元格底部的不同位置

更新

大家都在问