Всплывающая подсказка Bootstrap изменяется сверху вниз, когда достигает верхней части экрана.

Question

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

Если вы начнете код, который я поставил в этом вопросе, вы увидите, что подсказка отображается автоматически, и когда вы прокрутите вниз все подсказки, которые меняются сверху вниз, что я не хочу, чтобы вы делали, я хочу всегда держите его на вершине.

Спасибо за помощь.

$(window).ready(function() {
  $('[data-toggle="tooltip"]').tooltip({ placement: 'top', boundary: 'window'                 });
  $("#element").tooltip('show');
});

body{
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-secondary{
  height: 50px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<button id="element" type="button" class="btn btn-secondary" data-toggle="tooltip"  title="Tooltip on top">
  Tooltip on top
</button>

<script
			  src="https://code.jquery.com/jquery-3.3.1.min.js"
			  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
			  crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>

Answer 1

Вам не хватает data-placement="top"

попробуйте это

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
 Tooltip on top
</button>