Bootstrap 4 подсказки всегда располагаются внизу с разным размещением в ячейке таблицы

Question

У меня есть эта проблема в ячейке таблицы, где размещение всегда идет в нижнюю часть ячейки. Я хочу, чтобы он отображался вверху при наведении, но он просто не будет этого делать. Я считаю, что это -й класс, реагирующий на таблицы.

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>

Answer 1

добавить css style padding-top: 50px; в .table-responsive.

test: https://jsfiddle.net/a0jht7v2/

Answer 2

Ну, это немного сложно исправить на лету. Но всплывающая подсказка bootstrap всегда будет искать доступное пространство в поле родительского контейнера, и если его нет в нужной позиции, она автоматически разместит его на противоположной стороне. Таким образом, один из возможных обходных путей для исправления этого - добавить 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 в качестве оболочки для всей таблицы, bootstrap вручную установит его 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>