Не удалось загрузить всплывающую подсказку в теге Span (родительский) тега 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>

Редактировать: сообщение об ошибке из console.log -

Uncaught TypeError: Невозможно прочитать свойство indexOf из undefined в lt (popper.js: 629)в Object.onLoad (popper.js: 1134) в popper.js: 2342 в Array.forEach () в новом t (popper.js: 2340) в sTshow (tooltip.js: 287) в sT_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>

Answer 1

Ответ: data-Place = "auto top" по какой-то причине не работает, но data -place = "top" сработал!

Answer 2

Вы должны вызвать функцию 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>