无法加载Img标签(子级)的Span标签(父级)中的Bootstrap工具提示 [英] Bootstrap Tooltip in Span Tag (parent) of Img tag (child) failing to load

问题描述

我当前有一个无序列表，其中有多个列表项，其中包含图像，当我将鼠标悬停在图像上时，希望在其上方弹出一个工具提示.有人告诉我在它们周围放置一个span标签，它应该可以工作，但此刻我仅看到正常的工具提示.下面的代码:

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>

来自console.log的错误消息-

Error message from console.log -

未捕获的TypeError:无法读取未定义的属性'indexOf'在lt(popper.js:629)在Object.onLoad(popper.js:1134)在popper.js:2342在Array.forEach()在新的时间(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)

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 s.T.show (tooltip.js:287) at s.T._enter (tooltip.js:548) at HTMLSpanElement. (tooltip.js:480) at HTMLSpanElement.handle (jquery.min.js:2) at HTMLSpanElement.dispatch (jquery.min.js:2)

我的js包是这样放置的(sort.js包含我的Jquery数据目标函数的代码):

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>

推荐答案

您应该调用 tooltip()函数以获取结果，

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>

这篇关于无法加载Img标签(子级)的Span标签(父级)中的Bootstrap工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！