javascript - Bootstrap 工具提示显示文本并正确淡出，但不在图标上方的工具提示中

Question

我的工具提示遇到了问题，因为它在左侧显示文本并在鼠标悬停时消失，但无法在图标上方的工具提示框中正确显示它。我正在使用 Bootstrap 。我的一部分认为它可能是基于 jquery ui 和 jquery 之类的东西不能很好地协同工作 - 如果需要的话，我很乐意添加我的 application.js 。任何帮助将不胜感激。

我认为代码在鼠标悬停时应如下所示:

这是它的实际外观 - 此外，您还可以看到工具提示显示“关注者”在左侧，而不是在图标上方的工具提示中。它将标题更改为标题 aria-describeby“ui-tooltip-34”

这是代码的 html

  <li class="action-nav-button">
    <a href="#" class="tip" title="New Project" >
      <i class="icon-file-alt"></i>
    </a>
  </li>
</ul>

这是工具提示的 jquery

  #tooltips
  $('.tip, [rel=tooltip]').tooltip(gravity: 'n', fade: true, html:true)

这是 sass 的一部分

.action-nav-normal {
  .badge, .label {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 3px 5px;
    display: block;
    @include box-shadow(none);
  }

  .triangle-button {
    border-top-right-radius: 3px;
    pointer-events: none;

    i {
      right: 4px;
      top: 3px;
    }
  }
}

Answer 1

虽然我仍然需要对此进行更多研究，但我相信这是源于 gem ActiveAdmin 自动包含 Jquery 库。

一旦解决，我将发布进一步的解决方案。