无法加载 Img 标记(子标记)的跨度标记(父标记)中的引导工具提示

Question

我目前有一个无序列表，其中有多个包含图像的列表项，我希望在将鼠标悬停在图像上时在它们上方弹出一个工具提示。我被告知在它们周围放置一个 span 标签，它应该可以工作，但目前我只看到一个正常的工具提示。代码如下：

<ul class="list-inline dev-icons">
<li class="list-inline-item">
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" data-placement="auto top" title="Microsoft Word">
<img src="https://png.icons8.com/color/50/000000/ms-word.png">
</span>
</li>
<li class="list-inline-item">
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" data-placement="auto top" title="Microsoft Excel">
<img src="https://png.icons8.com/color/50/000000/ms-excel.png">
</span>
</li>
</ul>

编辑：来自控制台的错误消息.log -

未

捕获的类型错误：无法读取未定义的属性"indexOf" 在LT (Popper.js：629( at Object.onLoad (popper.js：1134( 波普尔.js：2342 at Array.forEach (( 在新 T (波普尔.js：2340( 在s.T.show(工具提示.js：287( 在s.T._enter(工具提示.js：548( at HTMLSpanElement.(工具提示.js：480( at HTMLSpanElement.handle (jquery.min.js：2( at HTMLSpanElement.dispatch (jquery.min.js：2(

我的js包是这样放置的(带有sort.js包含我的Jquery数据目标函数代码(：

<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/resume.min.js"></script>
<script src="js/sort.js"></script>

Answer 1

你应该调用tooltip()函数来获得结果，

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="list-inline dev-icons">
<li class="list-inline-item">
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" data-placement="auto top" title="Microsoft Word">
<img src="https://png.icons8.com/color/50/000000/ms-word.png"/>
</span>
</li>
<li class="list-inline-item">
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" data-placement="auto top" title="Microsoft Excel">
<img src="https://png.icons8.com/color/50/000000/ms-excel.png"/>
</span>
</li>
</ul>

Answer 2

回答：data-placement="auto top"由于某种原因不起作用，但data-placement="top"确实有效！