时间戳

首页 > 解决方案 > 当 Bootstrap Tooltip 到达屏幕顶部时，它会从上到下变化

javascript - 当 Bootstrap Tooltip 到达屏幕顶部时，它会从上到下变化

问题描述

我正在使用顶部位置的工具提示，问题是当我滚动并且工具提示到达窗口顶部时，它会更改其底部位置，我不希望它这样做，但将其保持在原位倍高。

如果您启动我在这个问题中输入的代码，您会看到工具提示会自动显示，并且当您向下滚动时，所有工具提示会从上到下位置发生我不希望您这样做的更改，我想将其保留在一直都是顶级的。

谢谢您的帮助。

$(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>

标签： javascripthtmlcssbootstrap-4tooltip

解决方案

你不见了data-placement="top"

尝试这个

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

推荐阅读