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

【问题标题】：Why is tooltip misplaced?为什么工具提示放错了位置？
【发布时间】：2023-03-05 02:45:01
【问题描述】：

我知道这可能很愚蠢，但我无法将工具提示放在正确的位置，它们总是不在位置

我在这里查找了答案，并尝试更改脚本顺序、添加其他脚本、取出脚本等，但似乎没有任何效果。

这是我的脚本

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

这是目前的结果

更新

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

【问题讨论】：

你怎么用body做容器？容器不应该只是悬停的元素吗？
@Pete 这是在这里找到的解决方案，但它不起作用我忘了删除它
如果上面有足够的空间，似乎会出现在顶部：jsfiddle.net/2jdhrpuk/3，如果没有，那么它会；把它放在下面：jsfiddle.net/qgmbsoey
@Pete 它也没有用
我的意思是它开箱即用，所以它一定是您添加的一些额外样式，没有minimal reproducible example，我们真的无能为力

标签： javascript jquery jquery-ui bootstrap-4 popper.js

【解决方案1】：

您需要将margin-top 设置为您的div，它包装了您的tooltips，以便在top 显示您的tooltip。下面是工作的sn-p

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

【讨论】：