bootstrap工具提示显示文本并正确淡出,但不位于图标上方的工具提示中

时间:2013-09-21 02:15:11

标签: javascript jquery html twitter-bootstrap sass

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

以下是我认为代码应该在mouseover上看的方式: Right Image

以下是它的实际外观 - 另外,您可以看到工具提示在左侧显示“粉丝”而不是在图标上的工具提示中。它将标题改为标题aria-describeby“ui-tooltip-34”

Wrong Image

这是代码的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;
    }
  }
}

1 个答案:

答案 0 :(得分:0)

虽然我还需要对此进行更多的研究,但我相信这源于gemAndAdmin自动包含Jquery库。

一旦解决,我会发布进一步的解决方案。