无法加载 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 -

未捕获的类型错误:无法读取未定义的属性indexOf"在 lt (popper.js:629)在 Object.onLoad (popper.js:1134)在 popper.js:2342在 Array.forEach()在新 t (popper.js:2340)在 s.T.show (tooltip.js:287)在 s.T._enter (tooltip.js:548)在 HTMLSpanElement.(工具提示.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屋！