Img 标签（子）的 Span 标签（父）中的引导工具提示无法加载答案

【问题标题】：Bootstrap Tooltip in Span Tag (parent) of Img tag (child) failing to loadImg 标签（子）的 Span 标签（父）中的引导工具提示无法加载
【发布时间】：2019-03-19 01:07:58
【问题描述】：

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

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

编辑：来自 console.log 的错误消息 -

未捕获的类型错误：无法读取未定义的属性“indexOf” 在 lt (popper.js:629) 在 Object.onLoad (popper.js:1134) 在 popper.js:2342 在 Array.forEach () 在新 t (popper.js:2340) 在 s.T.show (tooltip.js:287) 在 s.T._enter (tooltip.js:548) 在 HTMLSpanElement。 (tooltip.js:480) 在 HTMLSpanElement.handle (jquery.min.js:2) 在 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>

【问题讨论】：

你用的是什么插件？
波普尔？我目前收到一些错误
添加了错误信息

标签： javascript jquery html bootstrap-4

【解决方案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>

【讨论】：

我似乎收到了错误消息？是因为我将 popper.min.js 放入了我的供应商文件夹吗？
不用担心。希望你已经解决了。快乐的编码伙伴。干杯！
我收到了顶部黄色块代码中发布的错误，如果您可以查看的话。我认为这与我的文件包含有关
这是由于js 引用的顺序而发生的。似乎indexOf 无法读取这是jQuery 函数。可能会添加最新版本的 jquery。
你认为我需要用更新的版本替换供应商包（jQuery）？

【解决方案2】：

已回答：data-placement="auto top" 由于某种原因不起作用，但 data-placement="top" 起作用了！

【讨论】：