bootstrap工具提示会显示文本并正确消失，但是它不在图标上方的工具提示中

Question

I am having trouble with my tooltip, in that it displays the text to the left and fades away on mouse over, but does not properly display it in a tooltip box over the icon. I am using bootstrap. A part of me thinks it could be based on something like jquery ui and jquery not working well together - would be happy to add my application.js if needed. Any help would be appreciated.

Here is how I believe the code should look on mouseover:

Here is how it actually looks - additionally you can see the tooltip display "followers" to the left and not in a tooltip over the icon. It changes the title to title aria-describeby "ui-tooltip-34"

Here is the html for the code

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

Here is the jquery for the tooltip

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

Here is a part of the 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

Although I still need to do some more research on this I believe that this is stemming from the gem ActiveAdmin automatically including Jquery libraries.

I will post a further solution once resolved.