Question

我的图标图片上有一个工具提示，可以创建一个悬停效果标题。它的样式就像我想要的那样，但是它停止在线上的某个地方工作，看起来像是光标附近的基本Microsoft通知。我想说当我添加多组工具提示时发生了这种情况，但我并不完全确定。此外，所有内容都已经在课程中，因此当我添加更多内容时，没有任何ID可以中断。

$(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

.concentrationIcons {
  width: 100%;
  padding-right: 14%;
}

.tooltip {
  color: #e9cecf !important;
  font-family: Raleway !important;
}

.tooltip>.tooltip-inner {
  background-color: #36193a !important;
}

.iconImg {
  margin-right: 2%;
  width: 5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="concentrationIcons">
  <img class="iconImg tooltipDesign" src="assets/designIcon.png" data- toggle="tooltip" data-placement="right" title="Integration of art 
             and communication">
  <!-- DESIGN -->
  <img class="iconImg tooltipBus" src="assets/busIcon.png" data- toggle="tooltip" data-placement="right" title="Using technology to 
           maximize marketing">
  <!-- BUSTECH -->
  <img class="iconImg tooltipCom" src="assets/commIcon.png" data- toggle="tooltip" data-placement="right" title="Moving viewers 
              through a story">
  <!-- COMMUNICATIONS -->
</div>

Answer 1

数据切换之间有空格

data- toggle

Answer 2

Try this

 <img class="iconImg tooltipDesign" src="assets/designIcon.png" data-toggle="tooltip" data-placement="right" title="Integration of art 
             and communication">

Instead of

<img class="iconImg tooltipDesign" src="assets/designIcon.png" data- toggle="tooltip" data-placement="right" title="Integration of art 
             and communication">

工具提示CSS停止工作

2 个答案: