无法加载Img标签（子级）的Span标签（父级）中的Bootstrap工具提示

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>

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

未捕获的TypeError：无法在新t（popper.js）的Array.forEach（）的popper.js：2342的Object.onLoad（popper.js：1134）的lt（popper.js：629）的lt（popper.js：629）处读取未定义的属性'indexOf' ：2340），位于HTMLSpanElement的sT_enter（tooltip.js：548）的sTshow（tooltip.js：287）。 （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>

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”起作用了！