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>

Bootstrap工具提示到达屏幕顶部时从上到下更改

1 个答案: