Bootstrap Tooltip in Span Tag (parent) of Img tag (child) failing to load

Question

I currently have an unordered list, within it is multiple list items which contain images which I would like to have a tooltip popup above them upon hovering over the image. I was told to place a span tag around them and it should work but I'm only seeing a normal tooltip at the moment. Code Below:

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

Edit: Error message from console.log -

Uncaught TypeError: Cannot read property 'indexOf' of undefined at lt (popper.js:629) at Object.onLoad (popper.js:1134) at popper.js:2342 at Array.forEach () at new t (popper.js:2340) at sTshow (tooltip.js:287) at sT_enter (tooltip.js:548) at HTMLSpanElement. (tooltip.js:480) at HTMLSpanElement.handle (jquery.min.js:2) at HTMLSpanElement.dispatch (jquery.min.js:2)

My js packages are placed as so (with sort.js containing my code for Jquery data-target function):

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

You should call tooltip() function to get results,

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