無法加載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”起作用了！