为什么工具提示放错了位置？

Question

我知道也许这很愚蠢，但是我无法将工具提示放在正确的位置，它们始终处于位置

我一直在这里寻找答案，我尝试更改脚本顺序，添加其他脚本，删除脚本等，但是似乎没有任何作用。

这是我的脚本

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 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>

这是我初始化工具提示的方式

    $('[data-toggle="tooltip"]').tooltip({
        container: 'body'
    });

这是工具提示

    <a class="social-button shape-rounded sb-facebook" href="#" data-toggle="tooltip" data-placement="top" title="Facebook" data-original-title="Facebook">
             <i class="fab fa-facebook-f"></i>
    </a>

这是当前结果

UPDATE

按照建议在顶部添加更多空间也不起作用

Answer 1

您需要将margin-top设置为div，以包裹tooltips，以便在tooltip显示top。下面是有效的代码段

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

.container {
  margin: 100px;
  text-align: center
}

a {
  margin: 0px 20px;
  padding:20px
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <a class="border" href="#" data-toggle="tooltip" data-placement="top" title="Facebook"> <i class="fab fa-facebook-f"></i></a>
  <a class="border" href="#" data-toggle="tooltip" data-placement="bottom" title="twitter"> <i class="fab fa-twitter"></i></a>
  <a class="border" href="#" data-toggle="tooltip" data-placement="left" title="instagram"> <i class="fab fa-instagram"></i></a>
  <a class="border" href="#" data-toggle="tooltip" data-placement="right" title="linkedin"> <i class="fab fa-linkedin"></i></a>
</div>